Vue导入Excel文件转换为json

安装插件

npm install xlsx

<input ref="upload" hidden type="file" class="excelBox" @change="importExcelHandler" />

hidden隐藏样式 使用ref获取dom 调用内置方法 

this.$refs.upload.click()

importExcelHandler(e) {
      let filObj = e.target.files[0]

      // FileReader 对象就是专门处理二进制数据的，主要用于将文件内容读入内容
      const fileReader = new FileReader()

      // .readAsArrayBuffer, 读取指定的 Blob 或 File 内容
      fileReader.readAsArrayBuffer(filObj)
      fileReader.onload = event => {
        const fileData = event.target.result

        // 从电子表格字节中提取数据
        const workbook = XLSX.read(fileData, {
          type: 'binary'
        })

        // 选项卡顺序列出工作表名称
        const wsname = workbook.SheetNames[0]

        // 从工作表创建JS 值数组
        const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
        console.log(sheetJson, '得到的表格 JSON 内容')
        const newArr = []
        sheetJson.forEach(item => {
          newArr.push({
            order_no: item.订单编号,
            price: item.单价,
            nickname: item.昵称,
            alipay: item.支付宝,
            site: item.收货地址,
            alipay_no: item.支付宝交易号,
            payment: dayjs(item.付款时间).format('YYYY-MM-DD'),
            delivery: dayjs(item.发货时间).format('YYYY-MM-DD'),
            completion: dayjs(item.完成时间).format('YYYY-MM-DD'),
            createtime: dayjs(item.付款时间).format('YYYY-MM-DD')
          })
        })
        console.log(newArr, '能处理吗？')
        this.uploadHandler(newArr)
      }
    },
    async uploadHandler(newArr) {
      const { data } = await this.$post('/api/index/impo', { impo: JSON.stringify(newArr) })
      console.log(data, '导入成功了吗？')
    },