【vue】饿了么UI组件库中,Upload组件上传闪动的解决(摘抄)
最近接触到elementUI的上传组件,一路顺畅,就是在上传之后总是发现有闪动的现象,博主对其进行深入研究后发现,其闪动原因,是因为使用的
file-list
并不会自动添加上传了的图片,而需要由我们来人工来添加,而添加则必须使用on-success
事件中自带的参数去做赋值操作
闪动问题复现
可以非常明显的看到,图片上传成功后,图片会有一个先向右,然后停顿片刻摆着位置后,返回左侧的现象。
<!-- 上传组件,其中file-list绑定的参数为infoForm.effect --> <el-upload name="file" class="upload-demo" :action="root + 'goods/uploadImageToAliOss'" list-type="picture-card" :on-preview="patternRealPicPreview" :on-success="handleUploadPatternListSuccess" :on-remove="patternRemove" :file-list="infoForm.effect" :data="{ dir: 'goodsMask' }" :headers="uploaderHeader" :before-upload="handleBeforeUpload" > <i class="el-icon-plus"></i> </el-upload> // 对应的事件回调如下,这里只看上传成功后的回调事件 handleUploadPatternListSuccess(response) { // 出现问题的版本1 this.infoForm.effect.push({ url: response.data }) // 出现问题的版本2 let list = [] this.infoForm.effect.forEach((item) => { list.push(item) }) list.push({ url: response.data, percentage: 100, status: 'success', response: response, }) this.infoForm.effect = list }
博主是在上传成功的回调事件中,对effect做数组做处理。
版本1中博主直接对effect数组做push
操作,博主此时便怀疑会不会是push捣的鬼,故出现了版本2。
版本2中博主是重新定义了一个list
数组,将原本effect
中的数据拿出来,再组合上新上传的图片数据,最后将这个新的list
赋给effect
。但是这样做之后,还是出现了问题。
寻求解决方案
遇事查文档,博主很果断,直接上官方文档,找到了
on-success
事件其实还有两个参数,分别是file
跟fileList
,
其中file
是本次上传成功的文件信息,fileList
是已上传成功的文件列表汇总。
博主想着,要不就拿这两个参数试一下,一番捣鼓之后,惊喜的发现还真的成功了!
下边放成功之后的效果图以及相应的实现代码:
可以非常明显的看出来,闪动的现象已经消失了。
而其改动非常小:
handleUploadPatternListSuccess(response, file, fileList) { // 成功实现的版本1 this.infoForm.effect.push(file) // 成功实现的版本2 this.infoForm.effect = fileList }
无非就是使用其事件自带的参数进行push
或者直接重新赋值的操作。
总结
至此问题已经解决,而解决方案其实令博主有点窒息,博主并不清楚该框架的底层究竟对这两个参数做了什么操作,为什么我们自己定义的
list
作重新赋值也不行呢?
博主对此只能浅显地将其打印出来看看,第一张图为我们自己定义的新的list
,第二张图则为其回调事件中的参数。
其实其中有什么数据,对是否闪动并没有任何影响(由上边出现问题的代码版本2可知),而
set
跟get
的构造函数感觉应该也没有影响,同样对于数组项原型__proto__
则是一样的。
那么,问题就只有可能出在__ob__
身上了,博主查了一下,这个东西是Vue底层做双向数据绑定而添加的,仔细想想确实,使用新数组直接作赋值,是没有__ob__
这个东西的
相关资料:
欢迎关注我,一起进步!扫描下方二维码即可加我QQ

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」