Implement the el-upload function of uploading multiple pictures and files

It is used for the components in element and then modified. The general method is almost the same. The two ways of writing the code are as follows:

1) The interface is written directly in html

<el-col :span="12">
            <el-form-item label="附件" prop="attachments" :rules="[]">
              <el-upload
                class="upload-demo"
                ref="upload"
                multiple
                :action="`${urlapi}v1/common/base/upload`"  //接口
                :limit="limit"
                :file-list="fileList"
                :on-success="onSuccess"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>

Define variable 
data:{ 
 limit: 2, //Limit the number of uploaded files 
      accessory: [] 
} 
 //Domain name 
created () { 
    this.urlapi = process.env.VUE_APP_SERVER_URL 
  }, 
​//
 File upload is successful 
    onSuccess (res) { 
      const info = res.data 
      this.accessory.push(info) // Assign the value in info to the variable accessory 
      if (this.accessory.length === this.limit) { 
        const fileList = this.accessory.join( ',') // Check the passed character type 
        this.inputForm.attachments = fileList 
      } 
    },

2) Base64 method upload

<el-upload
            :http-request="uploadImg"
            :show-file-list="false"
            class="avatar-uploader"
            action=""
            accept="image/jpg, image/jpeg, image/png"
          >
            <el-image
              v-if="form.image"
              :src="`${baseUrl}/common/viewImage?imagepath=${form.image}`"
              class="avatar"
              fit="contain"
            >
              <template #error>
                <div class="image-slot">
                  <i class="el-icon-picture-outline"/>
                </div>
              </template>
            </el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
          

   // 图片转换base64 
    getBase64Image (file) {
      const promise = new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          resolve(e)
        }
      })
​
      return promise
    },
    
async uploadImg (res) {
      const { file } = res
      const PicBase = await this.getBase64Image(file)
      try {
        const obj = await this.addUpload(PicBase.target.result)
        this.inputForm.covePic = obj.fileUrl
      } catch (error) {
        console.log(error)
      }
    }, 
    
      // Image upload interface 
    addUpload (file) { 
      this.$http({ 
        url: `/v1/common/base/upload`, 
        method: 'post', 
        data: { file } //Pass parameters 
      }).then (({ data }) => { 
        this.inputForm.covePic = data.cover 
      }) 
    }, 
    
    or just choose one of the two 
        // 2. Upload picture interface 
    addUpload () { 
     let file =this.inputElem.covePic ; //Get file information 
      let data = new FormData(); //Build instance object 
       data.append("file", file); //Instantiate object instance 
      this.$http({ 
        url: `/v1/common/ base/upload`, 
        method: 'post', 
        data: { data } //Pass parameters 
      }).then(({ data }) => {
        this.inputForm.covePic = data.cover
      })
    },
​

at last

Thanks for reading. If you have any deficiencies, please feel free to discuss them in the comment area!