el-upload组件上传闪动的解决

最新推荐文章于 2025-04-09 16:34:22 发布

涳涳嘚慌

最新推荐文章于 2025-04-09 16:34:22 发布

阅读量6.8k

点赞数 3

分类专栏：笔记文章标签： vue vue.js 前端

原文链接：https://blog.youkuaiyun.com/weixin_43905402/article/details/107234523

版权

笔记专栏收录该内容

27 篇文章

订阅专栏

本文探讨了在使用Element UI的el-upload组件时遇到的闪动问题，详细分析了问题产生的原因，并提供了两种有效的解决方案。一种是直接将上传成功的文件添加到file-list中，另一种是替换整个file-list。通过调整handleUploadPatternListSuccess回调函数中的代码，可以消除上传后的闪动现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

闪动问题复现

el-upload组件上传后有闪动的现象，如下：
在这里插入图片描述

问题代码

<!-- 上传组件，其中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
}

解决方案

handleUploadPatternListSuccess(response, file, fileList) {
  // 成功实现的版本1
  this.infoForm.effect.push(file)

  // 成功实现的版本2
  this.infoForm.effect = fileList
}