使用elementui批量上传文件

1、此方法是先选取文件，后直接一次性上传文件，只会发送一次请求

 <el-form-item label="上传附件">
            <el-upload
              :file-list="fileListArr"  //选择的上传文件列表数据
              action="scfj"             //上传地址,可以直接写上传地址比如www.baidu.com;我这里的地址是需要携带其他参数的所以这里随便填写，因为这是必填参数
              ref="scfj"
              accept=".xls, .xlsx, .doc, .docx, .rar"  //可上传文件的类型
              :before-upload="beforeUploadFj"          //此方法再上传之前对文件再次校验
              :on-exceed="handleExceedFj"              //此方法用来对上传文件超过个数进行限制
              :on-remove="handleRemoveFj"              //此方法删除上传文件时触发
              multiple                                 //是否可以上传多个文件
              :limit="10"                              //上传文件的个数限制
              :auto-upload="false"                     //关闭自动上传；如开启自动上传，即选择之后就上传
              :on-change="onChangeFj"                  //此方法选择文件时候触发
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取文件</el-button
              >
              <el-button
                style="margin-left: 10px;"
                size="small"
                type="success"
                @click="uploadFj"                      //调用上传接口进行上传
                >上传附件</el-button
              >
            </el-upload>
          </el-form-item>

//对上传文件再次校验
 beforeUploadFj(file) {
      let zhzxFile = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = zhzxFile === "xls";
      const extension2 = zhzxFile === "xlsx";
      const extension3 = zhzxFile === "doc";
      const extension4 = zhzxFile === "docx";
      const extension5 = zhzxFile === "rar";

      // const isLt2M = file.size / 1024 / 1024 < 10   根据需求是否需要对上传文件大小进行限制
      if (
        !extension &&
        !extension2 &&
        !extension3 &&
        !extension4 &&
        !extension5
      ) {
        this.$message({
          message: "上传文件只能是 xls、xlsx、doc、docx、rar格式!",
          type: "warning",
        });
      }

      // if(!isLt2M) {

      //     this.$message({

      //         message: '上传文件大小不能超过 10MB!',

      //         type: 'warning'

      //     });

      // }

      // return extension || extension2 && isLt2M

return extension || extension2 || extension3 || extension4 || extension5;
    },



//对上传文件超过个数进行限制

    handleExceedFj(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
 


 //删除事件，需要根据具体业务分析，即删除时候从数组中去除选中的文件
    handleRemoveFj(file, fileList) {
        console.log(file.fileList)
      //this.fileListArr = fileList;
      //let delArr = this.saveScfjArr.filter((item) => {
       // return item != file.name;
     // });


     // this.saveScfjArr = delArr;




      //this.gwModleObj.scfj = this.saveScfjArr;
    },
 
 //选择文件时候触发  需根据需求具体分析


   onChangeFj(file, fileList) {
        console.log(file.fileList)
      //this.fileListArr = fileList;
      //this.gwModleObj.scfj = fileList;
      //this.$refs.gwModleObj.validateField("scfj");
      //this.saveSuccessId = 1;
    },

 //上传接口，进行上传

 uploadFj(value) {

      this.$refs.scfj.submit();

      let formData = new FormData();

      //所需参数

      this.fileListArr.forEach((item) => {

        formData.append("file", item.raw);

      });

      

     //接口

      getUploadFjApi(formData).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("附件上传成功！");
          this.saveScfjArr = res.data.data;
          this.saveSuccessId = "";

            this.$refs.scfj.clearFiles();  //清除上传文件


        }
      });
    },