vue-element上传文件没有及时回显

问题描述

提示：这里描述项目中遇到的问题：

VUE:
文件上传后需要在页面实时相应，但是vue 上传文件却没有及时回显

@Override
	handleSuccess(res,file){
	  this.file.img_url = res.data.img_url
      this.file.img_id = res.data.file_id
    }

改为一下方式：（使用vue-set直接写入|无需vue再次加载转化）

@Override
	handleSuccess(res,file){
	  ~~this.file.img_url = res.data.img_url~~ 
	  this.$set(this.file, 'img_url', res.data.img_url)
      this.file.img_id = res.data.file_id
    }

---

原因分析：

vue不会及时加载后写入的数据，Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的
详见官方文档—vue—深入响应式原理：https://cn.vuejs.org/v2/guide/reactivity.html：

解决方案：

this.$set(对象, 字段, 文件链接)