vue+element-ui+xlsx实现前端校验上传的Excel文件

最新推荐文章于 2024-08-03 18:47:21 发布

爪哇之路

最新推荐文章于 2024-08-03 18:47:21 发布

阅读量1.6w

点赞数 2

分类专栏： Vue 前端 Element-UI 文章标签： vue element-ui xlsx.js promise 前端

本文链接：https://blog.csdn.net/red_sheeps/article/details/83240959

版权

本文介绍了如何使用vue、element-ui和xlsx.js在前端实现Excel文件的校验。通过分析失败的代码和优化过程，最终成功地解决了异步问题，提升了用户体验。使用Promise.all确保异步操作完成后再执行校验，实现了前端模板文件的高效校验。

摘要由CSDN通过智能技术生成

GitHub代码看这里。

背景

项目中需要校验上传的Excel模板是否符合规范。一开始的想法是在后端进行校验，但是后来想到一个跑批的文件最大是2M，如果放置在后端校验，对于不规范的文件，这2M的传输也就白费了，同时，对于用户的体验也很不好，就想把校验放置在客户端，不合乎规范的文件直接拒掉，节省带宽同时客户体验也有所改善。

代码历程

项目是使用vue+element-ui构建的web项目，那么要实现前端Excel解析，就需要添加xlsx.js插件。
安装插件npm i xlsx --save，当然也可以这样cnpm i xlsx --save。

失败的代码

刚开始的使用element-ui的代码如下，实现的上传文件功能。本例中以下Excel格式则会校验通过。
当Excel满足此格式，则会校验通过

<el-upload
      style="display: inline; margin-left: 10px;margin-right: 10px;"
      action="#"
      ref="fileupload"
      :show-file-list="false"
      :http-request="upLoadChange"
      :before-upload="beforeUpload">
      <el-button size="small" type="primary">上传文件<i class="el-icon-upload el-icon--right"></i></el-button>
    </el-upload>

将校验的代码放置在beforeUpload方法中，代码如下：

  beforeUpload(file) {
    // 读取Excel文件并校验返回Boolean值
    let readExcelResult = this.readExcel(file);
    console.log(readExcelResult);
    if (readExcelResult) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        thi