未捕获的 TypeError：回调不是 Vuejs 上的函数

Posted 2023-02-22

【中文标题】未捕获的 TypeError：回调不是 Vuejs 上的函数

【英文标题】：Uncaught TypeError: callback is not a function on Vuejs

【发布时间】：2022-01-07 17:17:29

【问题描述】：

我尝试使用 Reader 类和 Vuejs 显示图像预览，但是当使用输入类型文件的 el 事件更改时，出现下一个错误：Uncaught TypeError: callback is not a function

<b-form-file
      ref="refInputEl"
      v-model="profileFile"
      accept=".jpg, .png, .gif"
      :hidden="true"
      plain
      @change="onFileChange"
      @input="inputImageRenderer"
/>

onFileChange(e) 
  const file = e.target.files
  if (file && file[0]) 
    const reader = new FileReader()
    // eslint-disable-next-line func-names
    reader.onload = function (event) 
      console.log(event.target.result)
      this.profilePhoto = event.target.result
    
    reader.readAsDataURL(file[0])
  
,

【问题讨论】：

符号callback 不会出现在代码中的任何位置。错误指的是哪一行？

【参考方案1】：

根据我的经验，VueJs 错误“回调不是函数”通常意味着您正在调用的东西期待一个不存在或没有正确返回的回调。检查是否缺少回调。

查看 VueJS 论坛中的这个示例，其中用户为类似问题提供了 Promise 示例：https://forum.vuejs.org/t/vuex-store-callback-is-not-a-function/104136/3

您可以尝试将 onFileChange 事件处理程序更改为 promise 并分解每个步骤、控制台日志记录以检查 FileReader 是否还需要它等等。