在 Vue.js 拿到上傳檔案的事件
16 Jan 2020原本嘗試遵照 在網頁應用程式中使用本地檔案 的方法用onchange
事件去提取檔案,卻一直提取失敗。
<input type="file" id="input" @change="handleFiles(this.files)">
猜測
猜測可能的原因應該是那個this
在寫成 vue 的語法之後遺失了,所以要想辦法繞開。
解法
不指定參數,讓瀏覽器自己傳事件進去
html 模板:
<input type="file" id="input" @change="handleFiles">
vue:
methods: {
handleFiles: function (element) {
let file = element.target.files[0];
let reader = new FileReader();
reader.onload = () => {
this.convert(reader.result);
};
reader.readAsText(file);
},
convert: function(str){
//TODO
}
}