0
点赞
收藏
分享

微信扫一扫

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

前程有光 2022-04-16 阅读 61
elementui

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

参考博客 以及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;
}
举报

相关推荐

0 条评论