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

闪动问题复现

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
}