Vue 使用el-upload上传文件与表单一起提交、解析二进制文件获取Excel数据json格式

一、安装依赖

npm install xlsx
import * as XLSX from 'xlsx'

二、代码

1、部分代码

<el-row>
  <el-form-item prop="file" label-width="0" style="position: relative;">
    <el-upload
      ref="upload"
      action=""                     // 自定义上传需要将action为空或者"#"
      :limit="1"                    // 限定上传文件数量
      :on-exceed="handleExceed"     // 文件数量超过限定数量时触发
      :auto-upload="false"          // 选取完文件后是否立即进行上传    false关闭      
      :multiple="false"             // 是否支持多选文件
      :on-change="uploadFile"
      :on-remove="handleRemove"     // 删除文件时触发
      accept=".xls"                 // 限制文件格式
    >
         <el-button type="primary">导入数据</el-button>
    </el-upload>
  </el-form-item>
</el-row>
<el-row type="flex" justify="end">
  <el-form-item>
     <el-button v-preventReClick type="primary" @click="submit()">提交</el-button>
  </el-form-item>
</el-row>

2、js代码

uploadFile(param) {
      this.form.file = param.raw // .raw才是真实文件,给form表单
      const reader = new FileReader()
      reader.readAsBinaryString(param.raw) // 以二进制的方式读取
      reader.onload = (e) => {
        const fileString = e.target.result // 读取文件内容
        // 对文件内容进行处理
        const workbook = XLSX.read(fileString, { type: 'binary' }) // 解析二进制格式数据
        const worksheet = workbook.Sheets[workbook.SheetNames[0]] // 获取第一个Sheet
        const result = XLSX.utils.sheet_to_json(worksheet) // json数据格式
        console.log('最终数据格式', result) // 控制台打印数据
        // 对数据进行处理……
      }
    },
handleExceed() {
   this.$message.warning('文件数量超过限制')
},
submit() {
   this.$refs.form.validate((valid) => {
      if (valid) {
          const formDatas = new FormData()
          for (const d in this.form) { // 序列化数据为json添加到表单对象
            if (this.form[d]) {
              formDatas.append(d, this.form[d])
            }
          }
          // 将数据随请求发过去
          this.add(formDatas)
       }
   })
}

3、接口部分

添加：'Content-Type': 'multipart/form-data'

add(formDatas) {
    return request({
      contentType: false,
      headers: { 'Content-Type': 'multipart/form-data'},
      method: 'post',
      url: '/',
      data: formDatas,
    })   
},

三、完后效果

1、接口参数部分

 2、解析二进制文件，最终数据格式