代码块
handleUploadSuccess(response, file, fileList) {
if (response.code === 200) {
this.form.backgroundImage = this.getProxyImgUrl(
response.uploadMappingPath
);
this.$forceUpdate();
} else {
this.$message.error(response.message);
}
}
业务场景
使用el-dialog打开了表单,表单中使用el-upload,当图片上传成功之后,通过回调函数来改变数据,实现页面的重新渲染,但是并没有成功
<el-form-item label="背景图" prop="backgroundImage">
<el-upload
class="avatar-uploader"
ref="upload"
:action="uploadAction"
:show-file-list="false"
:headers="uploadHeaders"
list-type="picture"
:on-success="handleUploadSuccess"
>
<img
v-if="form.backgroundImage"
:src="form.backgroundImage"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
解决方法
// 数据改变之后调用,会强迫Vue实例重新渲染
this.$forceUpdate();