我在编写图片上传功能时候,需要上传后的图片进行回显,但是未按预期进行,上传成功后调用赋值方法未进行赋值img的URL,但是图片未回显,具体代码如下:
<el-form-item label="场馆图片">
<el-upload :headers="headers" :action="uploadPath" :show-file-list="false" :on-success="uploadPicUrl" class="avatar-uploader" accept=".jpg,.jpeg,.png,.gif">
<img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon" /></el-upload>
</el-form-item>
js 图片上传成功后调用方法赋值 on-success="uploadPicUrl"
uploadPicUrl: function(response) {
this.dataForm.picUrl = response.data.url;
}
解决办法:
js 图片上传成功后调用方法赋值 on-success="uploadPicUrl"
uploadPicUrl: function(response) {
this.dataForm.picUrl = response.data.url;
//解决图片在dialog不回显问题
this.$forceUpdate()
}
使用this.$forceUpdate()进行强制Vue刷新;