当前位置: 首页 > news >正文

vue怎么实现导入excel表功能

            <el-uploadref="upload":action="aaa":on-change="importProject"name="excelFile"multiple:auto-upload="false":show-file-list="false"><el-button type="warning">导入</el-button></el-upload>

action 属性应是一个上传地址 URL 字符串

action如果不用的话可以随便传一个参数,但是不能省略

multiple:能同时上传多个表格

auto-upload="false":表示选择文件后不自动上传,而是通过按钮点击触发上传。

:show-file-list="false":不展示导入的文件名称

    importProject(file) {const fd = new FormData()fd.append('file', file.raw)this.excelToJSONs(fd)//把文件传给后端// console.log('文件', file)// console.log('fd', fd)}
 getMessage() {this.$refs.upload.clearFiles()},

this.$refs.upload.clearFiles(): 清空上传组件中的文件显示,把这句话加在想清空文件显示的函数里

可能的错误:

Required request part 'file' is not present

错误的代码:fd.append('file', file)

原因:看似正确地添加了 file 字段,但传入的是整个 file 对象(其实是 el-upload 返回的一个封装对象),而不是原生的 File 对象。

解决:改为fd.append('file', file.raw)

Current request is not a multipart request

原因:通常是因为后端期望接收一个 multipart/form-data 格式的请求(即文件上传格式),但前端发送的是其他格式(如 JSON)

解决:用FormData()

补充:

浏览器无法获取用户电脑上文件的“真实本地路径”(如 C:\xxx\xxx.xlsx),这是出于安全机制。
可以获取到的是:
文件对象 (File):用于读取内容或上传
文件名、大小、类型等基本信息
如果需要预览,可以生成临时 URL(URL.createObjectURL(file))

importProject(file) {console.log('完整文件对象:', file)// 文件名console.log('文件名:', file.name)// 文件大小(字节)console.log('文件大小:', file.size)// 文件类型console.log('文件类型:', file.type)// 保存原始 File 对象,供后续处理用this.selectedExcelFile = file.raw
}

http://www.dtcms.com/a/302175.html

相关文章:

  • unbuntn 22.04 coreutils文件系统故障
  • 微型化IMU如何突破无人机与机器人的性能边界?
  • 数据处理工具是做什么的?常见数据处理方法介绍
  • Linux 远程连接解析:SSH 协议理论与应用
  • TCP/IP协议栈测试
  • keepalived
  • LNMP架构+wordpress实现动静分离
  • 《UE教程》第八章第一回——光源类型
  • 四、计算机组成原理——第6章:总线
  • Polkadot 的 Web3 哲学:从乔布斯到 Gavin Wood 的数字自由传承
  • 记一次IDEA启动微服务卡住导致内存溢出问题
  • 期货Level2五档委托簿0.25秒高频分钟与日级历史行情数据解析
  • 如何让Word支持Markdown?
  • C#/.NET/.NET Core技术前沿周刊 | 第 48 期(2025年7.21-7.27)
  • 【Linux】Ubuntu上安装.NET 9运行时与ASP.NET Core项目部署入门
  • k8s 1.30 通过helm部署ingress-controller-4.12.1
  • Java面试宝典:MySQL8新特性
  • Caddy服务器指南
  • 架构实战——互联网架构模板(“开发层”和“服务层”技术)
  • 【服务器知识】nginx配置ipv6支持
  • 低代码可视化AR远程协助、巡检、装配、质检新平台-元境智搭平台
  • Odoo:免费开源的需求驱动物料需求计划(DDMRP)解决方案
  • 低轨星座通信路径规划仿真:基于Dijkstra算法的星间链路优化实现
  • Day 24:元组与os模块
  • NAS远程访问新解法:OMV与cpolar的技术协同价值
  • Maven中的bom和父依赖
  • 从0到500账号管理:亚矩阵云手机多开组队与虚拟定位实战指南
  • 从0开始学习R语言--Day60--EM插补法
  • C++11(上)(右值引用、移动构造)
  • 低速信号设计之 SMBUS 篇