Vue/Gridsome使用FileReader读取文件时加载提示无法正常消失问题排查

• this指向偏移导致加载态无法关闭：用来轮询状态的check函数是用普通function语法声明的，函数内部的this并不指向Vue组件实例。虽然代码开头用const _this = this存储了组件实例，但后续在check中修改this.loading = false时完全没有使用这个引用，实际修改的是全局作用域下的属性，根本没有触达Vue实例上的loading响应式变量，这就是本地开发时加载图弹出后无法关闭的核心原因。
• 冗余轮询逻辑完全没必要：用setTimeout循环轮询ready值的写法属于重复造轮子。FileReader的onloadend回调本身就会在文件读取完成的时机触发，根本不需要主动轮询等待状态变化，这种写法还会带来不必要的性能开销。
• 响应式变量未提前声明导致环境表现不一致：代码没有在Vue的data配置中提前把loading声明为初始值false。Vue2的响应式系统只会在初始化阶段对已经存在于data中的变量做追踪，未提前声明的变量不具备响应式特性，在CodePen这类在线运行环境中，很容易因为渲染时机差异出现初始加载态直接显示的非预期效果，和本地开发环境的表现不一致。
• 事件对象引用不规范：方法入参接收了模板传入的$event，但实际读取文件时直接依赖全局event.target.files[0]获取文件。这种写法在部分浏览器环境下会因为全局event对象不存在直接抛出报错，导致onloadend回调永远无法触发，轮询逻辑也会一直卡在等待状态。

• 删掉冗余的setTimeout轮询逻辑，直接在文件读取完成的onloadend回调中关闭加载态
• 所有需要修改Vue实例属性的位置，统一使用提前存储的组件实例引用，规避普通函数的this指向偏差
• 在组件data配置中提前声明loading: false，让Vue从初始化阶段就追踪该变量的响应式变化
• 直接使用方法入参中传入的事件对象获取文件，避免依赖全局事件对象导致的跨浏览器报错

修复后参考代码 #

JavaScript 逻辑部分 #

// 组件初始化配置中需提前声明响应式变量
// export default {
//   data() {
//     return {
//       loading: false,
//       form: {
//         files: ''
//       }
//     }
//   },
//   methods: {
    handleAttachment(event) {
      // 触发加载态
      this.loading = true;
      const _this = this;

      const reader = new FileReader()
      reader.onloadend = () => {
        // 文件读取完成后，直接更新表单数据并关闭加载态
        _this.form.files = reader.result;
        _this.loading = false;
      };

      // 通过入参传入的事件对象获取待读取的文件
      reader.readAsDataURL(event.target.files[0])
    }
//   }
// }

HTML 模板部分 #

<p>
  <input type="file" name="file" @change="handleAttachment($event)"/>
</p>

<p>
  <div v-if="loading">
    <div class="sk-chase">
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
    </div>
    <span>Loading...</span>
  </div>
</p>

如果后续需要适配大文件读取场景的进度反馈，可以直接监听FileReader的onprogress事件实时更新读取进度，不需要额外写轮询逻辑，能大幅降低代码复杂度。

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