1 使用element -ui upload 上传

data(){
    // 请求头
      Headers: {
        Authorization: "Bearer " + getToken(),
        "Content-Type": "multipart/form-data",
      },
      timer:null,
      FileList:[]
}

                <el-upload
                    class="upload-demo"
                    ref="Upload"
                    action=""
                    style="display: inline-block; margin-right: 10px"
                    :file-list="FileList"  //上传的文件列表,
                    :on-change="FileChange"  // change事件
                    :multiple="true"  //是否支持多选文件
                    :show-file-list="false" //是否显示已上传文件列表
                    :headers="Headers" //设置上传的请求头部
                    :auto-upload="false" 是否在选取文件后立即进行上传
                  >
                    <el-button
                      slot="trigger"
                      plain
                      size="small"
                      type="primary"
                      v-has="['tab', 'el-btn-fj']"
                    >
                      导入附件
                    </el-button>
                  </el-upload>

2 方法 相关事件处理前端处理多条上传问题-后端只是接收数据没做处理

---用到了防抖

// 过滤重复
    deduplication(arr) {
      let arr1 = []; //存id
      let newArr = []; //存新数组
      for (let i in arr) {
        if (arr1.indexOf(arr[i].name) == -1) {
          arr1.push(arr[i].name);
          newArr.push(arr[i]);
        }
      }
      return newArr;
    },
    // 防抖
    antiShake(fn, waits) {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      this.timer = setTimeout(() => {
        fn.apply(this, arguments); // 把参数传进去
      }, waits);
    },
    //change 事件
    FileChange(file, fileList) {
      if (this.selectId === undefined) {
        this.$message.warning("请先点击主列表的一条数据");
        return;
      }
      let arr = this.deduplication(fileList);  //去重方法
      if (arr.length !== fileList.length) {
        this.$message("上传重复文件，已过滤重复文件");
      }
      this.FileList = arr;
      this.antiShake(this.submitUpload, 500); // 防抖方法及循环调用接口方式
      
    },
    //上传方式及接口
    async submitUpload() {
      if (this.FileList.length === 0) {
        this.$message.warning("请导入附件");
        return;
      }
  
      for (let i = 0; i < this.FileList.length; i++) {
        let file = this.FileList[i];
        let formData = new FormData();
        formData.append("file", file.raw);
        formData.append("Module", this.Module);
        formData.append("tableName", this.tableName);
        formData.append("dataId", this.Id);
        try {
          let res = await fileListUpload(formData);
          this.$message({
            message: res.msg,
            type: "success",
          });
        } catch (e) {
          // 处理上传失败的情况
          console.error(e);
        }
      }
      this.$refs.Upload.clearFiles();
    },