elementUI二次文件上傳要刷新

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
        })
      },