Element-ui 文件批量上传改造

element批量上传的图片列表比较难看，改造一下，支持预览（需要自定义icon）和删除。

可以根据业务场景，在上传数量达到上限时通过v-if隐藏上传控件。

template

            <!-- 已上传图片列表 -->
          <div class="img_box">
            <div class="image-list-div"
                 v-for="(image,index) in images"
                 :key="index">
              <img :src="image"
                   class="avatar"
                   alt="" />
              <span class="license-delete-icon"
                    @click="handleRemove(image)">
                <em class="el-icon-delete"></em>
              </span>
            </div>
            <!-- 上传组件 -->
            <el-upload class="avatar-uploader"
                       ref="my-upload"
                       action="string"
                       accept=".jpg, .png, .jpeg"
                       list-type="picture-card"
                       :limit="9"
                       :show-file-list="false"
                       :http-request="uploadImages">
              <em class="el-icon-plus license-avatar-uploader-icon"></em>
            </el-upload>
            <!-- 图片预览 -->
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%"
                   :src="dialogImageUrl"
                   alt="">
            </el-dialog>
           </div>

scripts

    // 删除图片
    handleRemove (image) {
      let list = this.images  || []
      for (var i = 0; i < list.length; i++) {
        if (list[i] === image) {
          list.splice(i, 1)
          break
        }
      }
      this.images = list
    },
    // 图片预览
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 图片下载
    handleDownload (file) {
      console.log(file)
    },
    // 上传图片
    uploadImages (item) {
      if (this.images.length > 10) {
        this.$message.error('最多只能上传10张图片')
        return
      }
      let size = item.file.size / 1024
      if (size > 200) {
        this.$message.error('图片大小不得高于200KB')
        return
      }
      const form = new FormData()
      // 自定义参数
      form.append('file', item.file)
      form.append('type', 9)
      imageAPI
        .upload(form)
        .then(response => {
          if (response) {
            if (response.success) {
              this.images.push(response.data)
            }
          }
        })
        .catch(e => {
          console.log(e)
        })
    }

css

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 80px;
  text-align: center;
}

.avatar-uploader {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 147px;
  height: 147px;
  cursor: pointer;
  line-height: 143px;
  vertical-align: top;
  text-align: center;
}
.license-avatar-uploader-icon {
  font-family: element-icons !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  font-size: 28px;
  color: #8c939d;
}
.avatar {
  margin: 0px 3px 3px 0px;
  border-radius: 6px;
  width: 145px;
  height: 145px;
}
.back-img {
  width: 690px;
  height: 220px;
}
.license-delete-icon {
  display: none;
  font-family: element-icons !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  font-size: 28px;
  color: #8c939d;
}
.img_box >>> .el-form-item__content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.image-list-div {
  width: 145px;
  position: relative;
}
.image-list-div .avatar:hover {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0.6;
}
.image-list-div .license-delete-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.image-list-div {
  margin-right: 10px;
}
.image-list-div:hover .license-delete-icon {
  display: block;
  cursor: pointer;
}

本文地址：https://blog.csdn.net/qq_36289377/article/details/107321190