Question

我试图在Vue中使用ExcelJS，我需要FileReader来读取和解析文件，但我收到错误。如何将FileReader与VueJS一起使用？

输入表单

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

Answer 1

您可以使用以下方法

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

Answer 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;
       };
     }, 
 }

VueJS FileReader

2 个答案: