javascript - 在 Vue.js 组件方法中使用 FileReader API

Question

我正在使用 Vue.js 开发一个文件选择器。我想显示选定的文件预览。我用 FileReader API为达到这个。我使用 FileReader 对象的 readAsDataURL 方法读取用户选择的文件作为数据 url。

但是我收到一条错误消息说 reader.onload 不是这样的函数:

Uncaught TypeError: reader.onload is not a function
    at VueComponent.handleFileChanges

可能是reader is not defined，出现我上面提到的FileReader undefined错误。

我尝试这样做的方法如下:

handleFileChanges (e) {
    var reader = new window.FileReader() // if window is not used it says File READER is not defined
                reader.onload(function (event) {
                  // dispatch fileAttached to state UI postEditor with event.target.result as read dataURL
                  let imageDataURL = event.target.result
                  this.$store.dispatch('attachedFile', imageDataURL) // or previewFile
                })
                reader.readAsDataURL(e.target.files[i])
}

我想念的重点是什么？

Answer 1

正如错误所说，它是正确的，它不是一个函数。基本上 onload 是附加在新构造的 FileReader 对象上的事件处理程序/属性，因为它不是一个函数，它不接受任何回调。

像这样使用它:

handleFileChanges (e) {
    var reader = new window.FileReader() // if window is not used it says File READER is not defined
                reader.onload = function (event) {
                  // dispatch fileAttached to state UI postEditor with event.target.result as read dataURL
                  let imageDataURL = event.target.result
                  this.$store.dispatch('attachedFile', imageDataURL) // or previewFile
                }
                reader.readAsDataURL(e.target.files[i])
}

还要确保 this.$store.dispatch 中的 this 绑定(bind)到正确的上下文。