上传excel文件

文件上传,其实就是用el-upload组件来实现上传,只是换了样式,和图片上传一样

javascript 复制代码
<el-form-item label="选择文件">
          <el-input placeholder="请选择文件" v-model="form.file" disabled style="width: 450px">
            <el-upload slot="append" :show-file-list="false" :headers="headers" accept=".xlsx" action="/api/follow-admin/data-import-info/import" :before-upload="handleUploadBefore" :on-success="handleUploadSuccess">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-input>

          <p style="font-size: 12px; color: #e6a23c">文件大小不可大于10M且必须按照模版格式进行上传,仅支持xls/xlsx格式文件</p>
        </el-form-item>


 // 上传前事件
    handleUploadBefore (file) {
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isLt2M) {
        this.$message.warning('文件大小不能超过 1M')
      }
      return isLt2M
    },
    // 上传成功处理
    handleUploadSuccess (res) {
      if (res.code === 200) {
        this.$message.success('导入成功')
        this.form.file = res.data
        this.getTableDataList()
      } else {
        this.$message.error(res.msg)
      }
    }


<style lang="less" scoped>
.resident-export-data-manage {
  .table-bg {
    padding: 20px !important;
    min-height: auto !important;
    ::v-deep .el-form {
      .el-form-item {
        &:nth-child(2) {
          .el-form-item__content {
            .el-input {
              .el-input-group__append {
                background-color: #136fe0 !important;
                span {
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
相关推荐
用户516816614584111 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦11 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He11 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ16 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊17 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
葡萄城技术团队17 小时前
从100秒到10秒的性能优化,你真的掌握 Excel 的使用技巧了吗?
excel
艾小码17 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark1 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼1 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js