如何在最终表单提交之前异步/等待多个上传? [英] How to async/await multiple uploads before final form submit?

问题描述

我正在尝试允许用户上传多个文件.每个选择的文件都会触发一个 axios.post() 请求...所以如果用户选择了三个文件，那么将会有三个单独的 axios.post() 请求发送到上传文件的服务器.

I am trying to allow users to upload multiple files. Each file selected will trigger an axios.post() request... so if a user selects three files then there will be three separate axios.post() requests made to the server to upload the files.

表单中还有其他字段，例如 Name 和 Description，当用户单击表单提交按钮时将提交这些字段.但是，我希望表单提交等到所有文件都首先上传.

There are also other fields in the form such as Name and Description which will be submitted when the user clicks the form submit button. However, I want the form submission to wait until ALL the files are uploaded first.

为了简洁起见，这里是代码的缩短版本:

Here is a shortened version of the code for brevity:

<form @submit.prevent="sendForm" enctype="multipart/form-data">
  <input multiple ref="PostFiles" name="PostFiles" type="file" @change="selectFile">
  ... // other fields here
  <button type="submit" name="Send" value="Send"></button>
</form>


methods: {


     selectFile() {
               const this.Form.UploadFiles = this.$refs.PostFiles.files; // all files selected by user to upload

               Array.from(this.Form.UploadFiles).forEach(file => {
               this.uploadFile(file) // each file gets sent to uploadFile() individually
               });
     },

     async uploadFile(File) {
                const FormFile = new FormData();
                FormFile.append("PostFile", File);

                await this.$axios.post('/api', FormFile).then(response => {
                    console.log("Successfully uploaded")
                }).catch(err => {
                    console.log(err.response.data.error)
                })
                return true;
      },

      async sendForm() {
            const FormBody = new FormData();
            FormBody.append("Name", this.Form.Name);
            FormBody.append("Description", this.Form.Description);
            // Here I need to wait for all files to upload first!
            await this.uploadFile();
            // If all files uploaded then post the form
            await this.$axios.post('/api', FormBody)
      }

因为 uploadFile() 在每次上传后返回 true，sendForm() 将在第一个文件上传后提交.但我需要等到 this.Form.UploadFiles 数组中的所有文件都上传完毕.我怎么能这样做?

Because uploadFile() returns true after each individual upload, the sendForm() will submit after the first file is uploaded. But I need to await until ALL files in this.Form.UploadFiles array are uploaded. How could I do that?

推荐答案

您可以将 selectFiles 设为 async 并使用 for 循环而不是 forEach()

You can make selectFiles as async and use a for Loop instead of forEach()

async selectFile() {
    const this.Form.UploadFiles = this.$refs.PostFiles.files; // all files selected by user to upload

    for (const eachFile of Array.from(this.Form.UploadFiles)) {
        await this.uploadFile(eachFile); // each file gets sent to uploadFile() individually
    }
}



async sendForm() {
        const FormBody = new FormData();
        FormBody.append("Name", this.Form.Name);
        FormBody.append("Description", this.Form.Description);
        // Here I need to wait for all files to upload first!
        await this.selectFile();   //<--this is the change you need
        // If all files uploaded then post the form
        await this.$axios.post('/api', FormBody)
  }

这篇关于如何在最终表单提交之前异步/等待多个上传?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！