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

最新推荐文章于 2026-05-19 07:27:16 发布

原创

最新推荐文章于 2026-05-19 07:27:16 发布 · 1.6w 阅读

标签

#vue #element-ui #xlsx.js #promise #前端

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

标题

背景
代码历程
总结

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) {
        this.$message.error('文件大小不能超过2MB!');
        return fals

最低0.47元/天解锁文章