SoFunction
Updated on 2025-04-04

iview Upload component sample code for uploading multiple files

Upload component with iview Upload Manual upload Includes single file and multiple files

Idea: Create an array and push the file that needs to be uploaded into this array

1. Reference components

2. Upload manually, according to the official document, set: before-upload ="handleUpload" is equal to false

(1).:before-upload is a property of the iview Upload upload component. Setting the return value to false can prevent the default upload method (auto upload mode)

(2).handleUpload is the method *Note: The code is at the end

3. Upload method

 //Create formData object          let formData = new FormData();
          //Add file to formData object--this is another parameter          ('jsid', _jsid);

          //Upload multiple files--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
          for(var i=0; i< ; i++){ 
           ("uploadFile",[i]);  // File object          }

The HTML code is as follows:

<FormItem label="Profile information" v-show="islook">
          <template>
            <Upload
              multiple
              ref="upload"
              type="drag"
              :format="['docx','doc','txt', 'pdf']"
              :max-size="5000"
              :before-upload="handleUpload"
              :action="http">
              <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>Click or drag to upload the file</p>
              </div>
            </Upload>
            <div>
              <ul class="file-list" v-for="(list,index) in file" :key="index">
                <li>file name: <span style="font-size:15px;">{{  }}</span> <Icon type="ios-close" size="20" style="float:right;" @click="delFileList(index)"></Icon></li>
              </ul>
            </div>
          </template>
        </FormItem>


        <FormItem v-show="islookshenghe">
          <h3>Data has been submitted-Waiting for review</h3>
          <Button type="primary" @click="gobackfanhui">return</Button>
        </FormItem>

        <FormItem v-show="islook">
          <Button type="primary" :loading="loading2" icon="ios-power" @click="upload">
            <span v-if="!loading2">Accept and submit the bidding information</span>
            <span v-else>Uploading file...</span>
          </Button>      

          <p style="color:red;font-size:15px;" v-show="isfiletihsi">Please upload the file</p>
        </FormItem>

JS Code

delFileList(index){
        let that = this;
        (index, 1);
        
        ();
      }
handleUpload (file) {
        let that = this;
        if( >= 5){
          this.$("Only 5 files can be uploaded at most");
        }else{
          (file);
        }
        return false;
      }

Axios submit method code:

upload(){
        let that = this;
        let _jsid = that.$;
        if( > 0){
          that.loading2 = true;
          //Create formData object          let formData = new FormData();
          //Add files to formData object          ('jsid', _jsid);

          // Upload multiple files          for(var i=0; i< ; i++){ 
           ("uploadFile",[i]);  // File object          } 

          let config = {
           headers: {
            'Content-Type': 'multipart/form-data'
           }
          }

          ( + "/shweb/gys/gysmsge/", formData, {
                timeout: 10000,
                headers: {
                  'Content-Type': 'multipart/form-data'
                }
              }).then(function (rdata) {
                that.loading2 = false;
                if( == "0"){
                   = false;
                   = true;
                }
                (rdata);
              }).catch(function (error) {
                that.loading2 = false;
               that.$('Server Error' + error);
              });
        }else{
          that.$("Please upload at least one file");
        }
      }

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.