在图片回显的时候会出现这样的问题，如图：
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;
},
