vue使用Element UI上传图片没有及时更新视图的三种解决方式

handleAvatarSuccess(res, file) {
      console.log(file);
      this.form.idCardBackPhoto = file.response.msg;
      console.log(this.form.idCardBackPhoto);
    },
    handleAvatarSuccess2(res, file) {
      this.form.idCardFrontPhoto = file.response.msg;
      console.log(this.form.idCardFrontPhoto)
    },

解决方法：

方法1: 初始化属性

确保在你的form对象初始化时包含了idCardBackPhoto和idCardFrontPhoto属性。即使初始值为空串或null也没关系，这样Vue.js就能跟踪这些属性的变化了。

data() {
  return {
    form: {
      idCardFrontPhoto: '',
      idCardBackPhoto: ''
    }
  }
}

方法2: 使用Vue.set

如果你需要在运行时动态添加一个新的属性，并确保该属性是响应式的，可以使用Vue.set方法。对于你的示例，你可以修改handleAvatarSuccess和handleAvatarSuccess2函数如下：

handleAvatarSuccess(res, file) {
  this.$set(this.form, 'idCardBackPhoto', file.response.msg);
  console.log(this.form.idCardBackPhoto);
},
handleAvatarSuccess2(res, file) {
  this.$set(this.form, 'idCardFrontPhoto', file.response.msg);
  console.log(this.form.idCardFrontPhoto)
}

方法3: 替换整个对象

作为另一个方案，你可以通过替换整个form对象来触发更新。这种方法适用于当你需要更新多个属性时。

handleAvatarSuccess(res, file) {
  this.form = { ...this.form, idCardBackPhoto: file.response.msg };
  console.log(this.form.idCardBackPhoto);
},
handleAvatarSuccess2(res, file) {
  this.form = { ...this.form, idCardFrontPhoto: file.response.msg };
  console.log(this.form.idCardFrontPhoto)
}

以上方法都可以确保Vue.js能够检测到你的数据变化，并正确地更新DOM。选择最适合你当前需求的一种来实现即可。