vue中，按照批次上传formData 文件

Question

在vue中， 上传文件夹后，this.uploadListS中有多个文件，
需求：将下面代码改成：使用formData 传递其中的数据，每次请求只给后端传递一个文件，一次可以发送三个请求，发送完了后，在依次发送其他的请求

   const formData = new FormData()
        this.uploadListS.forEach(file => {
          formData.append('file', file)
          formData.append('pathData', file.webkitRelativePath)
        })
        formData.append('path', this.path)

        uploadrequestbodyfile(formData).then(res => {
          this.$message.success(res.msg)
        })

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你可以使用 Vue 的 async/await 语法和 FormData 对象来实现批量上传文件。下面是一个示例代码：

<template>
  <div>
    <input type="file" multiple @change="handleFileChange">
    <button @click="uploadFiles">上传文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadList: [],
      formData: new FormData()
    }
  },
  methods: {
    handleFileChange(event) {
      this.uploadList = event.target.files;
    },
    async uploadFiles() {
      for (let i = 0; i < this.uploadList.length; i++) {
        this.formData.append('files', this.uploadList[i]);
        try {
          await axios.post('/upload', this.formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          });
          this.formData.delete('files');
        } catch (error) {
          console.error(error);
        }
      }
    }
  }
}
</script>

在上面的代码中，我们首先创建了一个 FormData 对象，并在 handleFileChange 方法中将选择的文件添加到 uploadList 数组中。

然后，在 uploadFiles 方法中，我们使用 for 循环遍历 uploadList 数组，并将每个文件添加到 FormData 对象中。然后，我们使用 axios 库将 FormData 对象发送到后端服务器。

在每次发送请求后，我们使用 delete 方法将文件从 FormData 对象中删除，以便下一次发送请求时可以发送下一个文件。

这样，我们就可以实现批量上传文件，每次请求只发送一个文件。