返回顶部

vue + elementUI——upload传数据给后台出错后再次点击upload无效

解决方法:使用upload.clearFiles()方法清空文件列表

页面:

 <el-upload
   ref="upload_file"
    action=""
    :multiple="false"
    :limit="1"
    :show-file-list="false"
    :on-change="importExcel"
    :auto-upload="false">
      <el-button
          :loading="btnLoading"
            type="primary">
            本地上传
        </el-button>
</el-upload>

js:

importExcel(response) {
        let _this = this;
        _this.$refs.upload_file.clearFiles();
        let fileType = response.name.substring(response.name.lastIndexOf('.') + 1);
        if ((fileType == 'xlsx') || (fileType == 'xls')) {
        //后续处理是我的情况,按照个人需求修改即可
          let ossData = new FormData();
          ossData.append('file', response.raw);
          ossData.append('type', 1);

          _this.$http.post('***', ossData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              'token': localStorage.getItem('token')
            }
          }).then((res) => {
            if (res.status == 200 && res.data.code == 1) {
              _this.$message({
                message: '导入成功!',
                type: 'success'
              });
            } else {
              _this.$message.error('导入失败!');
            }
          }).catch((err) => {
              _this.$message.error('导入失败!');
            }
          )
        } else {
          _this.$message.error('文件格式错误,请重新选择!');
        }
},    

 

posted @ 2020-06-12 10:21  前端-xyq  阅读(1913)  评论(0编辑  收藏  举报