element ui el-upload上穿多张图片

需求如下：

这里是在form表单中做的

<el-form-item label="凭证照片"   ref="loadElement" prop="picList">
          <el-upload
          action="#"
          ref="upload"
          list-type="picture-card"
         :on-preview="handlePictureCardPreview"
         :on-remove="handleRemove"
          :http-request="uploadAvatar"
          :before-upload="beforeAvatarUpload"
         :file-list="fileList"
        >
        <!-- :action="baseUrl" -->
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
                 <img width="100%" :src="dialogImageUrl" alt="">
               </el-dialog>
        </el-form-item>

      // 图片上传功能
  uploadAvatar(item) {
          console.log(item.file,"1234")
          const formData = new FormData()
          formData.append('files', item.file)
          const uid = item.file.uid
          uploadManyFile(formData).then(res => {
            this.form.picList.push({ key: uid, value:res.data.result })
            console.log(this.form.picList,"434")
            // this.emptyUpload()
          })
          if (item.file) {
        this.$refs.loadElement.clearValidate();
      }
        },
        beforeAvatarUpload(file) {
           const isJPG = file.type === 'image/jpeg'
           const isPng = file.type === 'image/png'
           const isLt2M = file.size / 1024 / 1024 < 2
 
           if (!isJPG && !isPng) {
             this.$message.error('上传图片只能是 JPG或png 格式!')
           }
           if (!isLt2M) {
             this.$message.error('上传图片大小不能超过 2MB!')
           }
           return (isJPG || isPng) && isLt2M
        },
        handleRemove(file, fileList) {
          for (const i in this.form.picList) {
            if (this.form.picList[i].key === file.uid) {
              this.form.picList.splice(i, 1)
            }
            console.log(this.form.picList,"434")
          }
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url
          this.dialogVisible = true
        },
        /**
         * 清空上传组件
         */
        emptyUpload() {
          const mainImg = this.$refs.upload
          if (mainImg) {
            if (mainImg.length) {
              mainImg.forEach(item => {
                item.clearFiles()
              })
            } else {
              this.$refs.upload.clearFiles()
            }
          }
        },

data 中定义
form: {
        id: "",
        picStr: "",
        picList: [],
      },
imageUrl: "",
dialogImageUrl: "",

最后得在弹窗消除后清除图片

 close() {
      this.$refs.upload.clearFiles();
    }

本文地址：https://blog.csdn.net/Ares0412/article/details/109258199