VueJS 文件阅读器答案

【问题标题】：VueJS FileReaderVueJS 文件阅读器
【发布时间】：2018-01-29 03:39:12
【问题描述】：

我正在尝试在 Vue 中使用 ExcelJS，我需要 FileReader 来读取和解析文件，但我遇到了错误。如何在 VueJS 中使用 FileReader？

输入表格

    <input type="file" 
        id="importProductionSchedule" 
        name="importProductionSchedule" 
        @change="checkFile($event)" 
        ref="importProductionSchedule"
    >

checkFile 方法

    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: {}

【问题讨论】：

我想你只需要在这里接收活动checkFile(event) {...
@RichardMatsen 无论我是否添加事件或参数，都会传递事件变量。我测试了相同事件数据的两种方式和两种日志结果
如果您没有参数，我不确定事件如何进入。我想如果你在reader.readAsBinaryString( 行之前放置一个console.log，你会得到关于你的文件的正确信息？
我尝试了这段代码：reader.readAsArrayBuffer(event.target.files)，然后错误返回：未捕获错误：无法读取为文件：{“0”：{}}它看起来像里面的对象target.files 是空事件，尽管它已经附加了一个文件
对不起，当你告诉我事件被拾取时，我迷路了，即使它没有传入。通常在 Vue 中，事件使用v-on: 语法处理，而不是@ 语法。跨度>

标签： vue.js filereader exceljs sheetjs

【解决方案1】：

你可以使用下面的方法

createImage(file) {
    let reader = new FileReader()
    reader.onload = (event) => {
        this.product.image = event.target.result
    }
    reader.readAsDataURL(file)
}

【讨论】：

这似乎只适用于图像。不是图像文件怎么办？我试过 readAsBinaryString、readAsArrayBuffer 和 readAsText，它们似乎都不起作用。

【解决方案2】：

    methods:{
        uploadImage(event) {
        const image = event.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(image);
        reader.onload = (event) => {
        this.previewImage = event.target.result;
       };
     }, 
 }

【讨论】：