Vuetify文件上传转base64时无法获取转换结果问题求助

你的代码存在1个核心逻辑错误，导致FileReader无法正常执行：

• Vuetify的v-file-input组件v-model绑定的输出值本身就是选中的File对象（单文件模式）/File数组（多文件模式），不是原生input DOM节点。你代码里写的img.files实际取值为undefined，把非法参数传给reader.readAsDataURL()时，FileReader会静默失败，既不抛出报错也不会触发onloadend回调。
• 从你控制台打印的img日志也能验证：输出值本身就是File类型实例，不存在files属性。

直接把v-model返回的File对象传给FileReader即可，修正后的upload方法代码如下：

upload(img) {
  console.log('选中的文件', img)
  // 未选择文件时直接返回
  if (!img) return
  const reader = new FileReader()
  reader.onloadend = function () {
    console.log('base64转换结果', reader.result)
    // 后续可在这里写预览、上传逻辑
  }
  reader.readAsDataURL(img)
}

补充说明 #

• 如果你的组件开启了multiple多选属性，img会是File数组，需要遍历数组逐个调用readAsDataURL转换
• readAsDataURL方法仅接受Blob/File类型参数，传入其他类型值时不会触发load系列回调，属于静默失败，调试时需要注意参数合法性

运行示例截图：

内容的提问来源于stack exchange，提问作者code-8