【React+Antd】关于Upload导入XLSX时Uint8Array报错 XLSX.read的问题原因及解决方法

简介: 【React+Antd】关于Upload导入XLSX时Uint8Array报错 XLSX.read的问题原因及解决方法

报错TypeError: Cannot read properties of undefined (reading 'read') 的时候 把导入import XLSX from 'xlsx'; 改成 import * as XLSX from 'xlsx/xlsx.mjs'; 就可以了,请问是为什么?

这是因为 XLSX 库的模块结构发生了变化,从传统的 CommonJS 模块转换为 ES 模块。

相关知识

当涉及到 JavaScript 模块系统时,有两种常见的导入方式:CommonJS 和 ES 模块。

  1. CommonJS 和 ES 模块的区别:

    • CommonJS 是 Node.js 默认的模块系统,它使用 require()module.exports 进行模块的导入和导出。
    • ES 模块是 ECMAScript 标准定义的模块系统,在浏览器端和最新版本的 Node.js 中得到广泛支持,使用 importexport 语法进行模块的导入和导出。
  2. CommonJS 和 ES 模块的语法对比:

    • CommonJS 的导入语法:const module = require('module');
    • CommonJS 的导出语法:module.exports = module;
    • ES 模块的导入语法:import module from 'module';
    • ES 模块的导出语法:export default module;
  3. CommonJS 和 ES 模块的特性对比:

    • CommonJS 是同步加载模块,适用于服务器端的模块加载。
    • ES 模块是异步加载模块,支持静态分析,适用于浏览器端的模块加载。
  4. 在浏览器中使用 ES 模块:

    • 在现代浏览器中,可以使用 <script type="module"> 的方式来引入和使用 ES 模块。
    • 在 ES 模块中,可以使用 importexport 语法来导入和导出模块。
  5. 在 Node.js 中使用 ES 模块:

    • 在较新版本的 Node.js 中,可以直接使用 ES 模块的语法进行导入和导出。
    • 可以使用 .mjs 文件扩展名来标识该文件是 ES 模块。
    • 或者可以在 package.json 文件中设置 "type": "module" 来启用 ES 模块,然后可以使用 .js 文件扩展名进行导入和导出。

    CommonJS 和 ES 模块系统的差异。

相关文章
|
4月前
|
数据采集 前端开发 API
React - 实现一个基于 Antd 的数值范围组件
这篇文章介绍了如何实现一个基于Ant Design的数值范围组件,以满足数据采集流程中表单数据的录入需求。文章详细说明了组件的设计思路、代码结构、使用方式以及参数说明,并提供了效果预览和注意事项。组件支持只能输入数字,具有自定义表单控件封装的特点,同时支持所有InputNumber属性,以适应不同业务场景的需求。
130 0
React - 实现一个基于 Antd 的数值范围组件
|
3月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
167 2
|
4月前
|
前端开发 安全 数据安全/隐私保护
React - 实现一个基于 Antd 的密码强度校验组件
这篇文章介绍了一个基于 Nest 和 Umi 技术栈的个人项目开发中用到的密码强度校验组件的开发过程。作者首先在网上找不到满意的资料,于是决定自己开发该组件。文章依次介绍了效果预览、组件思想和组件开发的过程,并提供了相应的代码示例。最后,作者展示了实际效果,并提供了仓库地址供参考。
134 0
React - 实现一个基于 Antd 的密码强度校验组件
|
11月前
|
存储 编解码 前端开发
React 视频上传组件 Video Upload
随着互联网的发展,视频内容在网站和应用中愈发重要。本文探讨如何使用React构建高效、可靠的视频上传组件,涵盖基础概念、常见问题及解决方案。通过React的虚拟DOM和组件化开发模式,实现文件选择、进度显示、格式验证等功能,并解决跨域请求、并发上传等易错点。提供完整代码案例,确保用户能顺畅上传视频。
501 92
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
1100 1
|
10月前
|
移动开发 前端开发 JavaScript
React 音频上传组件 Audio Upload
本文介绍如何使用React构建音频上传组件,涵盖文件上传原理、React中文件处理步骤及常见问题解决方案。通过代码示例详细讲解了文件格式和大小限制、预览功能、进度条显示等实现方法,并针对跨域问题、文件名冲突和错误处理等易错点提供了解决方案,帮助开发者构建稳定可靠的音频上传功能。
300 25
|
11月前
|
移动开发 前端开发 API
React 拖拽上传组件 Drag & Drop Upload
拖拽上传(Drag & Drop Upload)是现代文件上传方式,允许用户通过简单拖拽操作将文件上传至网页。本文介绍如何在React应用中实现拖拽上传组件,涵盖HTML5拖放API、React状态管理、组件构建及常见问题解决。包括视觉反馈、文件类型和大小限制等优化措施,确保组件的用户体验和稳定性。
468 27
|
10月前
|
前端开发 JavaScript UED
React 音频上传组件:Audio Upload
本文介绍如何使用React构建音频上传组件,涵盖文件选择、预览、上传操作及错误处理。React的优势包括状态管理、组件化开发和丰富的生态系统支持。常见问题如文件类型验证、大小限制、并发上传控制、进度显示和错误重试机制也得到了详细探讨。通过示例代码展示了完整的实现过程,帮助开发者提升组件的稳定性和用户体验。
183 0
|
前端开发
React给antd中TreeSelect组件左侧加自定义图标icon
本文介绍了如何在React中为Ant Design的TreeSelect组件的每个树节点添加自定义图标,并解决了因缺少key属性而导致的警告问题,展示了如何通过递归函数处理treeData数据并为每个节点添加图标。
757 2
React给antd中TreeSelect组件左侧加自定义图标icon
|
前端开发
react使用antd中的Checkbox实现多选
在React项目中,通过Ant Design的Checkbox组件实现多选。引入Checkbox,使用Checkbox.Group来管理Checkbox,设置`value`属性绑定选中项数组,通过`onChange`更新数组。维护一个全选状态,根据选中项数量与总数决定全选按钮状态。全选按钮的`onChange`事件用于控制所有Checkbox的选中状态。
696 1
react使用antd中的Checkbox实现多选