VUE中element-upload上传前校验xls内容

VUE中element-upload上传前校验xls内容里写自定义目录标题)

VUE中element-upload上传前校验xls内容

一个需求就是在用户点击上传xls文件前对文件内容进行校验,不符合的就不能上传
先安装依赖

npm i xlsx

代码如下

<template>
      <el-upload
        v-model:file-list="fileList"
        class="upload-demo"
        drag
        :action="upUrl"
        multiple
        :headers="headersObj"
        name="files"
        :before-upload="handleChange"
      >
        <img src="@/assets/img/jiaowu.png" alt="" class="img2" />
        <div class="el-upload__text">
          <div><em>点击</em>或将文件拖拽到这里上传（支持批量上传）</div>
          <div style="margin: 3%; font-size: 12px">
            支持扩展名 .cov .xis .xisx
          </div>
          <div style="font-size: 12px">
            （每次上传不能超过50MB，每个企业最大上传数据量200MB)
          </div>
        </div>
        <template #tip>
          <div class="el-upload__tip"></div>
        </template>
      </el-upload>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import LocalCache from '@/utils/cache'
import { read, utils } from 'xlsx'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { arrayBuffer } from 'stream/consumers'
const route = useRouter()
let search = ref(false)
const clickDate = reactive(route.currentRoute.value.query)
const isActive = ref(true)
const upUrl = process.env.VUE_APP_BASE_API + 'v2/excelImport/fileUpload'
const headersObj = { token: LocalCache.getCache('token') }
const btnChange = (n: number) => {
  if (n === 1) {
    isActive.value = true
  }
  if (n === 2) {
    isActive.value = false
  }
}
const fileList = ref<UploadUserFile[]>([])

const handleChange = (file: any, fileList: any) => {
  let files = { 0: file }
  console.log(files[0].name.toLowerCase())

  if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
    ElMessage({
      message: '(上传格式不正确，请上传xls或者xlsx格式)',
      type: 'warning'
    })

    return false
  }
//这里需要返回一个promise因为读取xls是异步的
  return new Promise((resolve: any, reject: any) => {
    readExcel1(files, resolve, reject)
  })
}
// 表格导入
const readExcel1 = (files: any, resolve: any, reject: any) => {
  const fileReader = new FileReader()
  fileReader.onload = (ev: any) => {
    try {
      const data = ev.target.result
      const workbook = read(data, {
        type: 'binary'
      })
      // 取第一张表
      const wsname = workbook.SheetNames[0]
      // 生成json表格内容
      const ws: any = utils.sheet_to_json(workbook.Sheets[wsname])
      let name = files[0].name
      let errData = ''
      let status1 = false
      let status2 = false
      let status3 = false
      let code = ws[1]
      let _year = ws[5]
      let temKeys = Object.keys(code)
      let temKeyTime = Object.keys(_year)
      temKeys.forEach((item) => {
        if (code[item] == LocalCache.getCache('creditCode')) {
          status1 = true
        }
      })
      temKeyTime.forEach((item) => {
        if (_year[item] == clickDate.year) {
          status2 = true
        }
        if (_year[item] == clickDate.month) {
          status3 = true
        }
      })

      if (!status1) {
        errData = '统一社会信用码输入有误'
      }
      if (!status2 || !status3) {
        errData += `,请上传${clickDate.year}年${clickDate.month}月的文件`
      }

      if (status1 && status2 && status3) {
        resolve()
        ElMessage({
          message: `上传成功${name}`,
          type: 'success'
        })
        return
      }

      ElMessage({
        message: `${name}${errData}`,
        type: 'warning'
      })
      reject()

      // 后续为自己对ws数据的处理
    } catch (e) {
      return false
    }
  }
  fileReader.readAsBinaryString(files[0])
}
</script>


</style>