Question

我正在使用Vue.js开发文件选择器。我想显示所选的文件预览。我使用FileReader API来实现这一目标。我使用readAsDataURL对象的FileReader方法将用户选择的文件读作数据网址。

但是我收到一条错误消息，指出reader.onload不是像以下那样的函数：

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

可能是读者未定义，遵循我上面提到的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])
}

我错过了什么？

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 this.$store.dispatch与正确的背景有关。

Answer 2

因为onload是属性，所以应将其设置（修改）为回调。但是FileReader继承自EventTarget，所有事件（onload，onabort等）都可以与addEventListener一起使用。因此，无论如何您需要将回调作为on-load的事件处理程序传递，您可以考虑使用addEventListener。

// method 1
reader.onload = function (e) { ...
// method 2
reader.addEventListener("onload", function (e) { ...

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

2 个答案: