Vue.js读取Blob赋值给应用变量时出现this.modules未定义报错问询

1. this指向错误：图片分支的逻辑都在axios的then箭头函数内，箭头函数的this继承自外层作用域（也就是Vue组件实例），所以访问this.modules正常。而文本分支里reader.onload使用普通函数声明，普通函数的this在运行时指向触发回调的FileReader实例，并非Vue组件实例，因此this.modules为undefined。你尝试用self仍报错的原因是没有在reader.onload的外层作用域提前把Vue实例的this赋值给self变量，直接在回调内访问self自然也找不到对应变量。
2. 文本读取API误用：你当前调用readAsArrayBuffer读取响应Blob，返回的是二进制数组缓冲区，无法直接作为文本渲染到模板，即使解决指向问题也会显示异常。
3. 非报错类优化点：模板中visibility属性绑定不符合Vue规范，原生visibility是CSS属性，不能直接通过:visibility绑定，需要通过:style绑定，否则显隐控制不会生效。

提供两种可直接落地的修复方式：

方案1：箭头函数改写回调（推荐） #

箭头函数不会生成独立的this，会继承外层作用域的this，可以直接解决指向问题，同时替换读取API为readAsText：

else{
    this.modules[current]['results']['image']['visible'] = false
    this.modules[current]['results']['text']['visible'] = true
    var reader = new FileReader();
    // 用箭头函数改写onload回调
    reader.onload = (e) => {
        this.modules[current]['results']['text']['value'] = e.target.result
    }
    // 改用readAsText读取文本内容
    reader.readAsText(response.data);
}

方案2：外层作用域缓存Vue实例 #

如果不适合用箭头函数，可以在回调外提前存储Vue实例的指向：

else{
    this.modules[current]['results']['image']['visible'] = false
    this.modules[current]['results']['text']['visible'] = true
    // 外层提前缓存Vue组件实例
    const vm = this
    var reader = new FileReader();
    reader.onload = function(e) {
        // 用缓存的vm访问modules
        vm.modules[current]['results']['text']['value'] = e.target.result
    }
    reader.readAsText(response.data);
}

如果需要同步修复显隐控制的问题，把模板部分改为：

<div class="resultText" :style="{visibility: module.results.text.visible ? 'visible' : 'hidden'}">
    {{ module.results.text.value }}
</div>
<div class="resultImage" :style="{visibility: module.results.image.visible ? 'visible' : 'hidden'}">
    <img :src="module.results.image.value">
</div>

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