vue基于element-ui的el-upload实现上传和回显

在图片回显的时候会出现这样的问题，如图：

image.png

这种情况，要解决的话，只需要加入两行css。记住要使用样式穿透，否则不生效。

::v-deep .el-list-leave-active {
  transition: none;
}
::v-deep .el-list-leave-to {
  transition: none;
}

image.png

这样就不会出现第一张图的问题了，但是当限制一张图片的时候，上传按钮消失了，但是还在占位，只需要加一个自定义class类名，并加个样式就行了。如下：

<el-upload
    :file-list="fileList"
    action=""
    list-type="picture"
    :on-remove="handleRemove"
    :limit="1"
    :on-change="handleEditChange"
    :http-request="uploadImgMainImg"
    :class="{ disUoloadSty:fileList.length>0 }"
    accept="image/png, image/jpeg, image/jpg"
    style="width:45%;">
    <el-button v-if="fileList.length < 1"
         size="mini"
         style="width: 130px"
         type="danger">点击上传</el-button>
</el-upload>

没错，就是 :class="{ disUoloadSty:fileList.length>0 }"这个，样式如下：
style="width:45%;" width 过小，会自动隐藏 fileList的 name

.disUoloadSty {
   ::v-deep .el-upload{
    display:none;   /* 上传按钮隐藏 */
    }
   ::v-deep .el-upload-list__item:first-child{
     margin-top: 0;
   }
}

最后就是这样。

image.png

下面是上传组件对应的几个方法，如下：

handleRemove(file, fileList) {
      this.fileList = [];
    },
uploadImgMainImg(content) {
      const file = content.file;
      var formData = new FormData();
      formData.append("image", file);
      upload(formData).then((res) => {
        this.formData.avatar = res.data.avatar;
        this.$message.success("上传成功！");
      });
    },
handleEditChange(file, fileList) {
      this.fileList = fileList;
    },