SoFunction
Updated on 2025-04-05

Example of multi-file upload function implementation in el-upload front-end

In template:

    <el-upload
            class="upload-demo"
            ref="fileUpload1"
            :file-list="fileList1"
            action=""
            :on-exceed="handleExceed1"
            :http-request="httpRequest1"
            :on-remove="handleRemove1"
          >
            <el-button size="small" type="primary">Click to upload</el-button>
          </el-upload>

In script:

data:

 formdata1: new FormData(), //createFormData1Object

methods:

 methods: {
    handleExceed1(file, fileList) {
      //Function triggered during upload    },
    httpRequest1(file) {
      //The function triggered after uploading      this.("new_files", );
    },
    handleRemove1(file, fileList) {
      /**
        * Detect whether the deleted file is a newly added file file. If not, the deleted value will be given to md5.
        */
      if (( != undefined &&  instanceof File) == false) {
        this.deleteFiles1 += file.md5 + ",";
      }
    },  
  },

When submitting:

 this.formdata1 = new FormData(); //Create FormData object        this.("fault_no", this.$.fault_no);
        this.("progress", "1");
        this.("step", n);
        this.("files_to_delete", this.deleteFiles1);//The id value of the deleted file        this.$refs.();//File format file group used to submit file upload        updateFaultFile(this.formdata1).then((res) => {
          if ( === 20000) {
            this.$("Update Successfully");
          } else {
            this.$("Update failed");
          }
        });

If it is just a single file upload: pass it directly during submission

this.("new_files", [0]);

That's it

Summarize

This is the article about the implementation of multi-file upload function of el-upload front-end. For more related multi-file upload content on el-upload front-end, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!