在圖片回顯的時(shí)候會(huì)出現(xiàn)這樣的問(wèn)題，如圖：

image.png

這種情況，要解決的話，只需要加入兩行css。記住要使用樣式穿透，否則不生效。

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

image.png

這樣就不會(huì)出現(xiàn)第一張圖的問(wèn)題了，但是當(dāng)限制一張圖片的時(shí)候，上傳按鈕消失了，但是還在占位，只需要加一個(gè)自定義class類名，并加個(gè)樣式就行了。如下：

<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">點(diǎn)擊上傳</el-button>
</el-upload>

沒(méi)錯(cuò)，就是 :class="{ disUoloadSty:fileList.length>0 }"這個(gè)，樣式如下：
style="width:45%;" width 過(guò)小，會(huì)自動(dòng)隱藏 fileList的 name

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

最后就是這樣。

image.png

下面是上傳組件對(duì)應(yīng)的幾個(gè)方法，如下：

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;
    },