ElementUI el-upload上传 文件缩略图 删除

html: 

<el-form-item label="故障图片" prop="faultImgs">
      <!--故障图片上传-->
      <el-upload
        ref="pictureUpload"
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        accept="image/jpeg,image/gif,image/png"
      >
        <i slot="default" class="el-icon-plus" />
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url"
            alt=""
          >
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in" />
            </span>
            <span
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete" />
            </span>
          </span>
        </div>
        <div slot="tip" class="el-upload__tip">请上传图片格式文件</div>
      </el-upload>
      <!--点击单图进行大图预览-->
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="预览图片">
      </el-dialog>
    </el-form-item>

js:

//处理移除图片
handleRemove(file) {
      const uploadFiles = this.$refs.pictureUpload.uploadFiles
      console.log(uploadFiles)
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]['url'] === file.url) {
          uploadFiles.splice(i, 1)
        }
      }
    },
//预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
//下载
handleDownload(file) {
        window.open(file.url)
	},

css:

<style lang="scss" scoped>
.el-upload__tip{
    color: rgb(255, 0, 45);
    font-size: 14px;
    font-weight: bold;
}
</style>