vue+element upload组件上传多次调用接口(解决方案)

1.开发环境 vue+element
2.电脑系统 windows11专业版
3.在使用element的过程中,遇到upload组件上传多次调用接口,下面我来分享一下解决方法:

// tempalte代码
<el-upload
    action=""
    multiple
    :on-change="FileChange"
    :show-file-list="false"
    ref="updateFile"
    :auto-upload="false"
>
  <el-button size="small" type="primary">新增</el-button>
</el-upload>

//return 代码:
timer:null,
fileList:[],

FileChange (file, fileList){
this.fileList = [];
this.fileList = fileList;
let length = fileList.length;
const formData = new FormData();
let FileUploadNumber = 0;
const maxLength = Math.max(length, FileUploadNumber++);
clearTimeout(this.timer);
  this.timer = setTimeout(() => {
    if (length !== maxLength) {
      // console.log('当前length为', length, '不是最大值');
      return false;
    } else {
      // console.log('当前length为最大值', length);
      // 这里就可以调用你上传文件的接口了
      this.fileList instanceof Array && this.fileList.map(item => {
        formData.append("sdkSymbolFiles",item.raw);
      });

      updateApi(formData).then(res => {
        // console.log(res);
          this.$message({
              message: '成功',
              type: 'success'
          });
      }).catch(error => {
          this.$message({
              message: error.message || '失败',
              type: 'error'
          });
      });
      this.$refs.updateFile.clearFiles();// 处理上传列表数据缓存
    }
  });      
},

4.本期的分享到了这里就结束啦,希望对你有所帮忙,让我们一起努力走向巅峰。