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

我正在用Vue.js開發一個文件選取器。我想顯示選定的文件預覽。我使用FileReader API來實現這一點。我使用FileReader對象的readAsDataURL方法將用戶選擇的文件作爲數據url進行讀取。在Vue.js組件中使用FileReader API方法

但是我得到一個錯誤信息說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]) 
}

要點是什麼我失蹤？

來源

2017-04-24 Işık

及錯誤說，它是正確的，它不是一個function.Basically 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爲界，正確的上下文。

來源

2017-04-24 14:22:56

因爲onload是一個屬性，所以您應該將其設置（修改）爲回調。儘管FileReader繼承自EventTarget，但所有事件（onload，onabort等）都可以與addEventListener一起使用。因此，在任何情況下，您需要將回調作爲事件處理程序傳遞以進行加載，則可以考慮使用addEventListener。

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

來源

2017-04-24 15:03:36

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

回答

相關問題