我正在尝试在Vue中使用ExcelJS,我需要FileReader来读取和解析文件,但是我遇到了错误。如何在 VueJS 中使用 FileReader?
输入表单
<input type="file"
id="importProductionSchedule"
name="importProductionSchedule"
@change="checkFile($event)"
ref="importProductionSchedule"
>
检查文件方法
checkFile() {
let reader = new FileReader()
let self = this
reader.onload = (e) => {
let bstr = e.target.result
let wb = XLSX.read(bstr, {type:'binary'})
let wsname = wb.SheetNames[0]
let ws = wb.Sheets[wsname]
let data = XLSX.utils.sheet_to_json(ws, {header:1})
self.form.filedata = data
self.cols = make_cols(ws['!ref'])
}
reader.onerror = (stuff) => {
console.log("error", stuff)
console.log (stuff.getMessage())
}
// reader.readAsArrayBuffer(event)
reader.readAsBinaryString(event.target.files[0])
},
首先,在控制台中记录 event.target.files[0] 会返回文件,但我正在测试 event 和 event.target.files[0] 以确保。
这些是我的错误:
event = Uncaught Error: cannot read as File: {"isTrusted":true}
event.target.files[0] = Uncaught Error: cannot read as File: {}
您可以使用以下方法
createImage(file) {
let reader = new FileReader()
reader.onload = (event) => {
this.product.image = event.target.result
}
reader.readAsDataURL(file)
}
methods:{
uploadImage(event) {
const image = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = (event) => {
this.previewImage = event.target.result;
};
},
}
<input class="patientPorting"
type="file"
@change="onFilePicked( $event )"/>
创建以下方法来获取文件。
const onFilePicked = (event) =>{
const fData = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(fData);
reader.onload = (event) => {
fileData = event.target.result;
};
console.log(fileData);
jsonObj = [];
jsonObj.push({
"fileData" : fileData,
"fileName":fData.name,
"fileSize":fData.size,
"fileType":fData.type,
}
);
}