vue-element多文件上传多次请求接口问题解决办法

element-ui多文件上传请求多次接口解决办法

问题

使用element-ui上传多文件时，发送请求出现多次提交问题,重复上传

警告: 切勿将发送后台请求的axios方法写在自定义上传方法如:http-request="handleHttpRequest"中,否则将会按文件数量发送，造成多次请求，不符合预期提交一次上传多个文件。

覆盖默认上传,自定义上传:http-request

覆盖默认上传方法，使用自定义上传方法

 		<el-form-item label="附件" :label-width="formLabelWidth">
            <el-upload
              class="upload-demo"
              ref="upload"
              action="/"
              :on-change="changeFile"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="5"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :http-request="handleHttpRequest"
              :auto-upload="false"
              list-type="picture-card"
            >
              <el-button slot="trigger" size="small" type="primary"
                >上传附件</el-button
              >
              <div
                slot="tip"
                class="el-upload__tip"
                style="float: right;color: #E6A23C"
              >
                只能上传jpg/png/gif文件，且不超过10Mb
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancel('add')">取 消</el-button>
          <el-button type="primary" @click="handleOk('add')">确 定</el-button>
        </div>

上传方法handleHttpRequest

 handleHttpRequest(file) {
      this.formObj.append("file", file.file);//将文件放入file中
      }

提交方法 handleOk

 handleOk() {
        let vm = this;
        vm.formObj = new FormData();
        vm.$store
          .dispatch("card/addCmPersonalCertAndAttach", vm.formObj)
          .then(() => {
            vm.form = {};
            vm.fileList = [];
            vm.$message.success("添加成功");
            vm.query();
          });
        vm.$refs.upload.submit();
        vm.addDialog = false;
      }