闪动问题复现
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
}