使用element 自定义上传组件（http-request属性）时界面抖动 （重复显示新增动画 回显）

自定义显示遇到显示完成新增动画，上传完成之后又重复显示新增动画的问题

参考博客 以及element-ui组件el-upload自定义上传时界面抖动

 

 问题1：使用 http-request 不能触发 on-success 函数。

　　原因：

　　使用 http-request 时，需要返回 promise 对象，才会触发 on-success。

解决方法：

　　将 ttp-request 函数结果返回 promise 对象即可。

问题2： 上传抖动问题

原因：

一般使用自定义上传图片，即将后台返回的数据跟处理成 el-upload 需要的格式。

fileSuccess(res, file, filelist) {

   this.fileList.push({...res.data});<br>},

此时，push 进去 file 与 内部的 file 是不一样的（uid）不一样。所以导致组件内部的交互错乱。但是 el-upload 组件内部是这么处理的，大概意思就是，你上传的时候，内部会有个对应的 fileList （uploadFiles），当你上传的时候，内部 uploadFiles 会添加一个 file 信息，当你从外部 push 时，会进入 el-upload 的watch 如下图

 解决方法：

在 on-success 里直接赋值

onSuccess(res, file, filelist) {

    this.fileList = filelist;

},

 如果，外部是服务器传回的地址，就在使用一个 tempList 来管理服务器的图片上传列表。然后其他的跟原来的组件没啥区别，在做相应的操作的同时处理 tempList 。

如果上述方法无法解决回显问题 可以试试 这个方法 

隐藏 loading 元素

 

/* 直接禁用 loading 元素*/
.el-upload-list__item.is-ready,
.el-upload-list__item.is-uploading {
  display: none !important;
}