elementui二次文件上传要刷新

Posted 2020-12-10 huangjie-sol

elementui 第二次或者第N次文件上传 要刷新页面才可以

原因：

因为你的 el-upload 设置了 :limit="1" 当你上传了一次文件后，你没有清楚当前的 files ，所有点击第二次没有反应

 

解决办法：

1. 为你的 el-upload 添加

   ref="upload"

    

2. 文件上传成功时的钩子中把files清空

   // 上传成功之后清除历史记录;否则只能上传一次
   this.$refs.upload.clearFiles()

    

 

完整页面代码：

template：
        <el-upload
          class="upload-demo"
          style="display: inline-block"
          ref="upload"
          accept=".xls,.xlsx"
          :action="uploadActionUrl"
          :data="upLoadData"
          :before-upload="handleBeforeUpload"
          :on-success="handleSuccess"
          :on-error="handleError"
          :limit="1"
          :show-file-list="false"
          enctype="multipart/form-data">
          <el-tooltip class="item" effect="dark" content="请下载模板再上传，且只能上传xls/xlsx文件" placement="top">
            <el-button type="info" icon="el-icon-upload2">导入教师信息</el-button>
          </el-tooltip>
        </el-upload>


methods：
      // 导入教师信息
      handleBeforeUpload () {
        // 上传文件之前的钩子
        this.dataListLoading = true
      },
      handleSuccess (res, file) {
        // 文件上传成功时的钩子
        this.dataListLoading = false
        // 回调
        if (res && res.code === 0) {
          this.$message({
            message: ‘数据导入成功!‘,
            type: ‘success‘,
            duration: 1500,
            onClose: () => {
              // 提示完渲染页面
              this.getDataList()
            }
          })
        } else if (res.code === 444) {
          // 当有教师信息重复导入时
          this.errorDataVisible = true
          this.$nextTick(() => {
            this.$refs.errorData.init(res.errorData)
          })
        } else {
          this.$message.error(res.msg)
        }
        // 上传成功之后清除历史记录;否则只能上传一次
        this.$refs.upload.clearFiles()
      },
      handleError () {
        // 文件上传失败时的钩子
        this.dataListLoading = false
        this.$message({
          message: ‘数据导入失败!‘,
          type: ‘error‘,
          duration: 1500
        })
      },

 

以上是关于elementui二次文件上传要刷新的主要内容，如果未能解决你的问题，请参考以下文章

人人商城为啥点有些功能反应慢，要刷新才能出来，怎么解决

ElementUI实现文件上传的方式

vue+axios+elementUI文件上传与下载

elementUI上传组件改造--扫码上传

elementUI上传图片前判断图片的尺寸大小

前端防扒代码片段