Vue中FileReader的reader.result无法赋值给外部变量，返回null如何解决

问题根源 #

• this指向错误：reader.onload绑定的普通函数内部this指向FileReader实例，而非Vue组件实例，回调内的赋值操作根本没有作用到data中定义的imageUrl变量上
• API异步特性：reader.readAsDataURL是异步方法，调用后不会立刻执行onload回调，写在回调外的打印逻辑会先执行，此时赋值操作还未触发，拿到的自然是初始值null

修复后完整代码 #

export default {
  data() {
    return {
      item: {
        image: null
      },
      imageUrl: null,
    };
  },

  methods: {
    uploadImage(e) {
      let image = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(image);

      // 改为箭头函数，继承外层方法的this（指向Vue组件实例）
      reader.onload = () => {
        this.imageUrl = reader.result
        console.log(this.imageUrl)
        // 所有依赖imageUrl的业务逻辑必须写在回调内部
        // this.setImageOne(this.imageUrl)
      }
      // 此处代码会早于onload回调执行，无法拿到最新赋值的imageUrl，相关逻辑不要写在这里
      // console.log(this.imageUrl)
    },
  }
}

额外优化建议 #

如果需要避免回调嵌套，可将FileReader封装为返回Promise的方法，用async/await语法调用：

// 封装读取方法
readFileAsDataURL(file) {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onload = e => resolve(e.target.result)
    reader.readAsDataURL(file)
  })
},
// 调用示例
async uploadImage(e) {
  const image = e.target.files[0]
  this.imageUrl = await this.readFileAsDataURL(image)
  // 后续逻辑可直接写在await之后
  console.log(this.imageUrl)
}

内容的提问来源于stack exchange，提问作者Rippyblogger