FileReader读取文件

事件处理

FileReader.onabort 读取操作被中断时触发
FileReader.onerror 读取操作发生错误时触发
FileReader.onload 读取操作完成时触发
FileReader.onloadstart 读取操作开始时触发
FileReader.onloadend 读取操作结束时（要么成功，要么失败）触发。
FileReader.onprogress 读取Blob时触发

方法

FileReader.abort() 中止读取操作
FileReader.readAsArrayBuffer(file) 将文件读取为ArrayBuffer
FileReader.readAsBinaryString(file) 将文件读取为二进制字符串
FileReader.readAsDataURL(file) 将文件读取为Data URL Base64字符串
FileReader.readAsText(file, [encoding]) 将文件读取为文本，encoding缺省值为'UTF-8'

上传img示例

<input
  type='file'
  accept='image/*'
  @change='uploadImg($event)'
  ref='InputFile'
  name='files'
/>
methods: {
   uploadImg (event) {
      // 声明一个文件读取器
      const reader = new FileReader()
      // 选择文件
      const fileData = this.$refs.InputFile.files[0]
      // 读取文件
      reader.readAsDataURL(fileData)
      // 读取成功后的回调
      reader.onload = (e) => {
        this.myImg = e.srcElement.result
      }
    }
}

上传excel示例

npm i xlsx -D

<template>
    ……
    <input
      type='file'
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      @change='uploadExcel($event)'
      ref='InputFile'
      name='files'
    />
    ……
</template>

<script>
import XLSX from 'xlsx'

……
methods: {
    uploadExcel (event) {
      // 收集结果
      const result = []
      // 声明一个文件读取器
      const reader = new FileReader()
      // 选择文件
      const fileData = this.$refs.InputFile.files[0]
      // 读取文件
      reader.readAsBinaryString(fileData)
      // 读取成功后的回调
      reader.onload = (e) => {
        const data = e.target.result
        // 以二进制流方式读取得到整份excel表格
        const workbook = XLSX.read(data, { type: 'binary' }) // type: 'base64'
        // 循环遍历excel的sheet
        Object.keys(workbook.Sheets).forEach((sheet, index) => {
          result.push(
            // 将excel转换成json对象放入数组中
            ...XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
          )
        })
        console.log(result)
      }
      // 读取失败的回调
      reader.onerror = function (err) {
        console.log(err)
      }
    }
}
</script>

问题总结

1.input file的onchange事件触发一次失效

解决办法：读取成功后value置空
<input id="file",type="file" onchange="upload()"/>
document.getElementById('file').value = null

<input ref="InputFile" @change="upload" type="file"/>
this.$refs.InputFile.value = null