vue2上传多个文件？

Question

<template>
  <el-upload
    actions="#"
    :http-request="uploadFile"
    :mulitiple="true"
    :auto-upload="true"
    :file-list="fileList"
    :on-change="handleChange"
    :show-file-list="false"
  >
    <el-button>上传附件</el-button>
  </el-upload>
</template>
<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    uploadFile(file) {
      const formData = new FormData()
      this.fileList.map((file) => {
        formData.append('file', file.raw)
      })
      // 执行axios请求
    }
  },
}
</script>

上面是代码
现在的问题是 上传多个文件的时候回调用多次接口，比如上传三个文件就回调用三次axios请求
现在需要解决的是 上传多个文件只执行一次axios请求

Answer 1

您可以看下，不知道这里是否能满足您的需求。
https://blog.csdn.net/m0_38039437/article/details/128579034

Answer 2

不要将发送后台请求的axios方法写在自定义上传方法如:http-request="uploadFile"中,否则将会按文件数量发送，造成多次请求，不符合预期提交一次上传多个文件。
按照你的写法应该是：在uploadFile方法中可以将所有文件添加在一个变量中，然后使用其他按钮去调用axios接口。

以下是我们经常导入多个文件的写法，仅供参考

         <el-upload
              accept=".xls, .xlsx"
              multiple
              drag
              action
              :limit="50"
              :file-list="fileList"
              :on-change="handleFileChange"
              :on-remove="handleFileRemove"
              :on-exceed="handleFileExceed"
              :auto-upload="false"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
                </div>
              </div>
              <div
                class="el-upload__tip"
                slot="tip"
                style="text-align: center; color: #e6a23c"
              >
                支持批量多日上传，只能上传xls/xlsx文件
              </div>
            </el-upload>
            <div v-if="fileList.length > 0" class="mt20 text-c">
              <el-button
                type="success"
                size="mini"
                icon="el-icon-upload"
                class="mt10"
                :disabled="uploadLoading"
                @click="handleFileUpload"
                >确认上传</el-button
              >
              <el-button
                type="warning"
                size="mini"
                class="mt10"
                icon="el-icon-refresh-right"
                :disabled="uploadLoading"
                @click="handleFileAdd"
                >重新添加</el-button
              >
            </div>

data() {
   return {
      file: {},
      // 上传文件loading
      uploadLoading: false,
      // 上传文件列表
      fileList: [],
    }
}
methods: {
   /** 更新选择的文件列表*/
    handleFileChange(files, fileList) {
      this.fileList.push(files.raw);
    },
    /** 移除文件*/
    handleFileRemove(file, fileList) {
      this.fileList = fileList;
    },
    /** 超出限制文件*/
    handleFileExceed(files, fileList) {
      this.$message.warning(
        `本次上传限制 50 个文件，您选择了 ${
          files.length + fileList.length
        } 个文件，请重新选择文件`
      );
    },
    /** 上传*/
    handleFileUpload() {
      let fd = new FormData();
      this.fileList.forEach((item) => {
        fd.append("files", item);
      });
      this.uploadLoading = true;
      importFiles(fd).then((res) => {
        if (res) {
          this.$message.success("数据上传成功。");
        }
        setTimeout(() => {
          this.fileList = [];
          this.uploadLoading = false;
        }, 100);
      });
    },
}