Vue+Element UI Upload 组件 上传单张图片去除后面的+号

这个思路是隐藏 el-upload–picture-card”
我是在钩子函数 上传中、上传成功、上传失败、预览这些地方进行控制。这样在上传中那个"+"号也可以马上隐藏

上传组件代码块

<el-form-item label="产品图片:" size="mini">
  <el-upload
    action="上传接口"
    :limit="1"
    :on-preview="handlePictureCardPreview"
    :before-upload="beforeAvatarUpload"
    :on-progress="onProgress"
    :on-success="imgSuccess"
    :on-error="imgError"
    list-type="picture-card"
    :on-remove="handleRemove"
    :class="{disabled:uploadDisabled}"
    :file-list="fileList"
  >
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上传不超过4MB的图片</div>
  </el-upload>
</el-form-item>

预览图片

<el-dialog :modal-append-to-body="false" :visible.sync="imgVisible" width="30%">
  <img width="100%" :src="dialogImageUrl" alt="图片未找到" />
</el-dialog>

声明变量

data() {
    return {
      // 是否禁用上传
      uploadDisabled: false,
      // 是否显示预览图片
      imgVisible: false,
      // 预览图片url
      dialogImageUrl: "",
      // 上传的文件列表, 例如: [{name: 'xxx.jpg', url: 'https://xxx.com/xxx.jpg'}]
      fileList: [],
       submitData: {
        // 产品图片
        productImg: ""
      }
    }
}

事件

methods: {
   beforeAvatarUpload(file) {
      let isLt4M = file.size / 1024 / 1024 < 4;

      if (!isLt4M) {
        this.$message.error('上传头像图片大小不能超过 4MB!');
      }
      return isLt4M;
    },
    // 上传中
    onProgress(event, file, fileList){
      this.uploadDisabled = true;
    },
    // 图片上传成功
    imgSuccess(response, file, fileList) {
      this.uploadDisabled = true;
      if(response.status == 0){
        this.submitData.productImg = response.data;
      }else if(response.status == -1){
        this.submitData.productImg = "";
        this.fileList = [];
        this.uploadDisabled = false;
        this.$message.error(response.errorMsg);
      }else{
        this.submitData.productImg = "";
        this.fileList = [];
        this.uploadDisabled = false;
        this.$message.error(response.errorMsg);
      }
    },
    // 图片上传失败
    imgError(err, file, fileList){
      this.$message.error("上传失败");
      this.uploadDisabled = false;
    },
    // 预览图片
    handlePictureCardPreview(e) {
      this.imgVisible = true;
      this.dialogImageUrl = e.target.currentSrc;
      this.uploadDisabled = true;
    },
    // 删除图片
    handleRemove(file, fileList) {
      this.submitData.productImg = "";
      this.uploadDisabled = false;
    },
}

样式控制

<style scoped lang="">
.disabled >>> .el-upload--picture-card{
  display: none;
}
</style>

第一次写博客，不足之处请提出，大佬们请多多指教！