Recently, when developing projects with Vue, there was a requirement to import Word documents and support multiple selections. The Upload component of the element-UI supports multiple files. You only need to set multiple to true. But this component will default multi-select several times file to upload, so I will upload request for many times, as a result of the backend interface requirements are request to upload multiple files at a time, and we also know that the request too much can cause more stress to the server, which is based on a variety of reasons, the upload upload behavior have to reform.

Let’s take a look at the results before and after

Result before modification: When two files are uploaded at the same time, two requests are sent to the interface, and each request contains one file.

Result: An interface request is sent when two files are uploaded at the same time. The interface input parameter contains two files.

Method 1: Configure file-list (recommended)

HTML part:

<el-upload
    class="upload-demo list-uploadbtn"
    ref="upload"
    :action="curBastUrl"
    :auto-upload="false"
    :on-remove="updataRemove"
    :before-upload="beforeUpload"
    :on-change="updatachange"
    :file-list="fileList"
    :multiple="true">
    <el-button size="small">Click on the upload</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload">determine</el-button>
Copy the code

Js:

submitUpload() {  / / import
    let formData = new FormData();  // Use FormData to store the uploaded file
    this.fileList.forEach(file= > { 
        formData.append('file'The file), raw)}) formData, append ('categoryDirectory'.this.filedata.categoryDirectory)

    // importCase is the upload interface
    importCase(formData).then((res) = > { 
        // Manual upload cannot trigger successful or failed hook functions, so call it manually
    　　this.updataSuccess(res.data) 
    }, (err) = >{})}Copy the code

Key code description:

  • auto-uploadSet tofalseUsed to turn off automatic uploads of components;
  • file-listConfigure an array to receive a list of uploaded files.
  • multipleSet totrueIndicates that multiple files are supported.
  • actionIf the url is set to a complete upload interface, an error occurs if the url is not set
  • Don’t need to configuredata,on-success,on-errorAnd other parameters, because manual upload will not use the configuration information;
  • Finally, manually invoke the upload function by clicking the buttonsubmitUpload, create aFormData 把 fileList File in.

Method 2: Configure http-Request

HTML part:

<el-upload
    class="upload-demo list-uploadbtn"
    ref="upload"
    :action="curBastUrl"
    :auto-upload="false"
    :http-request="uploadFile"
    :on-remove="updataRemove"
    :before-upload="beforeUpload"
    :on-change="updatachange"
    :multiple="true">
    <el-button size="small">Click on the upload</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload">determine</el-button>
Copy the code

Js:

submitUpload() {  / / import
    let tempData =  this.filedata
    this.filedata = new FormData()  // Use FormData to store the uploaded file
    this.$refs.upload.submit()  // The uploadFile method will be called repeatedly for multiple files

    this.filedata.append('categoryDirectory', tempData.categoryDirectory)

    // importCase is the upload interface
    importCase(this.filedata).then((res) = > { 
    // Manual upload cannot trigger successful or failed hook functions, so call it manually
    　　this.updataSuccess(res.data) 
    }, (err) = >{})}uploadFile(file) {
    this.filedata.append('file', file.file)
}
Copy the code

Key code description:

  • http-requestCustom upload method;
  • Finally, manually invoke the upload function by clicking the buttonsubmitUpload, create aFormData, the calluploadThe component’ssubmitMethod is called in a loophttp-requestConfigure the method to goFormData Where you keep your files.