VUE2 使用 el-upload 实现单文件上传、删除、预览（上传后隐藏上传图片按钮）

实现后效果展示：

上传前：

上传后：

注意点：on-change 事件不要与 on-success 事件同时使用

Demo：

<template>
  <div>
    <el-upload
      list-type="picture-card"
      accept="image/*"
      :file-list="fileList"
      :action="uploadImageApi"
      :headers="headers"
      :limit="uploadLimit"
      :auto-upload="true"
      :on-change="uploadChange"
      :before-upload="beforeUpload"
      :class="{ 'upload-hide': hideUploadEdit }"
    >
      <i slot="default" class="el-icon-plus"></i>
      <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-actions">
            <!-- 图片预览 -->
            <span class="el-upload-list__item-preview" @click="handlePreview(file)">
              <i class="el-icon-zoom-in" />
            </span>
            <!-- 删除图片 -->
            <span class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete" />
            </span>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="addForm.faceUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      addForm: {
        faceUrl: null,
      },
      uploadLimit: 1,
      dialogVisible: false,
      disabled: false,
      hideUploadEdit: false,
      headers: {
        Authorization: getToken(),
      },
      fileList: [],
    }
  },
  computed: {
    ...mapGetters(['uploadImageApi']),
  },
  methods: {
    uploadChange(file, fileList) {
      this.hideUploadEdit = fileList.length >= this.uploadLimit
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    handleRemove(file, fileList) {
      this.hideUploadEdit = false
      this.fileList = []
    },
    handlePreview(file) {
      this.addForm.faceUrl = file.url
      this.dialogVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .upload-hide .el-upload--picture-card {
  display: none;
}
</style>

如果不想要动画效果css 中可以加上以下代码：

::v-deep .el-upload-list__item {
  transition: none !important;
}