javascript - 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

不要将发送后台请求的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);      });    },}

Answer 2

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