前端文件上传

JS不能直接读取本地系统文件，需要用户交互操作提供文件或从后端接收文件，才能操作文件。

文件选择器<input type="file">用来让用户选取文件。出于安全考虑，浏览器不允许脚本自行设置这个控件的value属性，即文件必须是用户手动选取的，不能是脚本指定的。一旦用户选好了文件，脚本就可以读取这个文件。

文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement上的 mozGetAsFile() API。在Gecko(Gecko 是由 Mozilla 工程开发出的布局引擎的名字。)中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互。

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。

在Vue.js中通过input标签选中文件后，读取文件内容的代码：

HTML部分：

<input type="file" @change="handleUpload">  


JS部分：
import XLSX from 'xlsx' // 需先安装 npm i xlsx -D

methods: {
    handleUpload (e) {
      var files = e.target.files

       var fileReader = new FileReader()
       fileReader.onload = function(ev) {
         try {
           var data = ev.target.result,
             workbook = XLSX.read(data, { type: 'binary'}), // 以二进制流方式读取得到整份excel表格对象
             persons = [] // 存储获取到的数据
         } catch (e) {
           console.log('文件类型不正确')
           return
         }

         var fromTo = '' // 表格的表格范围，可用于判断表头是否数量是否正确
         for (var sheet in workbook.Sheets) {  // 遍历每张表读取
           if (workbook.Sheets.hasOwnProperty(sheet)) {
             fromTo = workbook.Sheets[sheet]['!ref'];
             console.log(fromTo);
             persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))
             // break; // 如果只取第一张表，就取消注释这行
           }
         }
         console.log(persons)
       }

       fileReader.readAsBinaryString(files[0]) // 以二进制方式打开文件
    },
}