2020-06-16 Element-UI 上传图片到达一定数量

在项目中使用了element的el-upload上传图片组件，需求是上传一张图片而已，但是发现上传完以后一张图片后在旁边会自己再生成一个上传图片的按钮

原来的效果是这样的：

但需求是上传之后没有这个上传按钮，删除图片之后再出现。

1.通过浏览器找到了这个上传图片按钮的class名称为 .el-upload–picture-card 我知道不可以直接修改，所以决定给这个组件绑定一个class名

组件写法：

    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :limit="2"
      :on-success="handleSuccess"
      :on-change="handleFileChange"
      :on-remove="handleRemove"
      :class="{hideAdd:uploadDisabled}">
      <i class="el-icon-plus"></i>
    </el-upload>

css代码：

.hideAdd {
  /deep/ .el-upload--picture-card {
    display: none;
  }
}

2.data里面设定两个初始的状态值

   // 控制是否显示图片上传+号
   uploadDisabled: false,
   // 允许上传图片的数量
   limitImgNumber: 1,

3.在el-upload中绑定一个on-change事件，这个事件有两个参数（file，fileList）并且在添加文件、上传成功和上传失败时都会被调用（但是注意删除文件不会被调用。。。）：

    // 文件上传变化
    handleFileChange(file, fileList) {
      //是否展示图片+号
      this.uploadDisabled = fileList.length >= this.limitImgNumber;
    },

4.由于on-change事件，在文件移除时不会被触发，因此我们在on-remove文件移除事件中去手动触发on-change事件

    // 文件移除事件
    handleRemove(file, fileList) {
            //手动触发change事件
            this.handleFileChange(file, fileList);
    },

完成！效果图：