vue解析excel文件，上传excel文件

目录

---

---

前言

点击按钮，上传excel文件。因为后端获取excel中的数据比较难，但是前端能很轻松的解析excel文件获取数据。将上传的excel文件的数据解析出来，post请求提交给后端。用到了element-ui中的el-upload。

---

一、准备

安装xlsx依赖

进入对应项目文件夹

npm install xlsx --save

二、使用步骤

1.用element-ui布局

点击上传按钮，弹出选择文件的dialog，弹出框有两个上传文件选项，要提交给后端的数据是，资源计划表文件和解析资源问题表得到的数据，点击弹出框中的上传按钮，发起post请求，提交给后端。
在上传文件变化时（即在选择文件选择完成后），就要解析上传的excel问题表

:on-change="fileChange2"

    <div id="btn">
        <el-button :loading="downloadLoading" type="primary" @click="dialogVisible = true" icon="el-icon-document">上传</el-button>
    </div>
    <el-dialog width="400px" title="请上传的文件" :visible.sync="dialogVisible">
       <el-form ref="form" label-width="80px" v-model="form">
        <el-upload
          ref="upload1"
          class="upload-demo1"
          action="#"
          :limit="1"
          v-model="form.file1"
          accept=".xlsx"
          :auto-upload="false"
          :on-change="fileChange1"
          :http-request="uploadHttpRequest1">
          <el-button size="small" type="primary" plain>选择资源计划表</el-button>
          <div slot="tip" class="el-upload__tip" style="color:red">说明：必须上传资源计划表 (格式：excel文件)</div>
        </el-upload>
        <el-upload
          ref="upload2"
          class="upload-demo2"
          action="#"
          :limit="1"
          accept=".xlsx"
          v-model="form.file2"
          :auto-upload="false"
          :on-change="fileChange2"
          :http-request="uploadHttpRequest2">
          <el-button size="small" type="primary" plain>选择资源问题表</el-button>
          <div slot="tip" class="el-upload__tip" style="color:red">说明：必须上传资源问题表 (格式：excel文件)</div>
        </el-upload>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadRdpContent()">上传</el-button>
      </span>
    </el-dialog>

2.JS部分

<script>
// 写上传数据的post请求的函数
import { uploadResource } from "@/api/rdp";
import XLSX from 'xlsx'
export default {
  data() {
    return {
      dialogVisible: false,
      downloadLoading: false,
      form:{
          file1: null,
          file2: null
      },
      excelData: null,
      formData: null
    };
  },
  methods: {
    uploadHttpRequest1(param){
      var date = new Date() 
      var dateFormat = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      this.formData = new FormData()
      this.formData.append('上传时间', dateFormat)
      this.formData.append('资源计划表', param.file)
    },
    uploadHttpRequest2(param){
      this.formData.append('资源问题', JSON.stringify(this.excelData))
    },
    fileChange1(file) {
      this.form.file1= file.raw
    },
    fileChange2(file) {
      this.form.file2= file.raw
      // 解析传入的excel表
      const fileReader = new FileReader()
      fileReader.onload = ev => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary' 
          })
          const exlname = workbook.SheetNames[0] // 取第一张表
          const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname],{
              // 目的是让excel中没有值的置为'',保留标题
              header: 0,
              defval: ""
          }) // 生成json表格内容
          // 将 JSON 数据挂到 data 里
          this.excelData = exl
        } catch (e) {
          console.log('出错了：：')
          return false
        }
      }
      fileReader.readAsBinaryString(file.raw)
    },
    // 点击dialog中的上传按钮，将资源表和解析问题表得到的数据传给后端
    uploadRdpContent(){
      if(this.form.file1!==null&&this.form.file2!==null){
          this.dialogVisible = false
          this.$refs.upload1.submit()
          this.$refs.upload2.submit()
          uploadResource(this.formData).then((response)=>{
              this.$notify({
                type: 'success',
                message: response.data.message
              })
          })
      }else{
        this.dialogVisible = true
        this.$notify({
            type: 'warning',
            message: '两个文件必须上传'
        })
      }
    }
  }
};
</script>

总结