vue中怎么把reader.onload中的定义的变量在外部调用

👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

---

前言

通常我们在前端遇到读写服务端文件时，会遇到此类问题

一、reader.onload中向外部赋值失败

reader.onload = function (e) {
 this.content = reader.result  //赋值失败
 console.log(reader.result); //打印正常
};

二、解决方法

1. 改变this指向

reader.onload =  (e) => {
 this.content = reader.result  //赋值失败
 console.log(reader.result); //打印正常
};

2. 利用Promise

单独封装返回Promise对象的uploadFile函数，把文件流传给uploadFile函数，然后通过 .then 方法拿到返回结果

function uploadFile(file) {    
   return new Promise(function(resolve, reject) {    
   let reader = new FileReader()
   reader.readAsArrayBuffer(file)
   reader.onload = function() {
   resolve(this.result)
   }
 })
}

uploadFile(file).then(res=>{
  console.log(res.data)
})

三、为什么直接赋值失败

reader.onload = function (e) {
 this.content = reader.result  //赋值失败
 console.log(reader.result); //打印正常
};

很简单：this指向问题

---

在如上的代码示例中，this.content = reader.result 这里,this并没有按照大家想的那样指向 vue实例，而是指向了 函数的调用者：reader，所以导致给外部赋值失败

而 箭头函数 就很好的解决了这个问题
因为箭头函数中无this指向，会一级级的向上找，很自然的找到 vue 实例,于是成功赋值

独立封装函数则是利用了 Promise 中的 resolve 解决的此类问题

---

总结

以上就是今天要讲的内容，通过一个内部函数赋值的小问题，引出了this指向及其他解决此类方法的问题