当前位置: 首页 > 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.lryc.cn/news/602328.html

相关文章:

  • 基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
  • IDEA 手动下载安装数据库驱动,IDEA无法下载数据库驱动问题解决方案,IDEA无法连接数据库解决方案(通用,Oracle为例)
  • idea启动java应用报错
  • 设计模式十二:门面模式 (FaçadePattern)
  • 结合项目阐述 设计模式:单例、工厂、观察者、代理
  • 记一次IDEA启动微服务卡住导致内存溢出问题
  • Java设计模式之<建造者模式>
  • idea编译报错 java: 非法字符: ‘\ufeff‘ 解决方案
  • 解决windows系统下 idea、CLion 控制台中文乱码问题
  • 机器学习sklearn:不纯度与决策树构建
  • Rust实战:AI与机器学习自动炒饭机器学习
  • Linux系统Centos7 安装mysql5.7教程 和mysql的简单指令
  • 搭建HAProxy高可用负载均衡系统
  • 【拓扑排序 缩点】P2272 [ZJOI2007] 最大半连通子图|省选-
  • Linux应用开发基础知识——LInux学习FreeType编程(七)
  • 【C++进阶】---- 二叉搜索树
  • 基于LangGraph Cli的智能数据分析助手
  • Android中PID与UID的区别和联系(2)
  • Go 语言面试题
  • 数据分析干货| 衡石科技可视化创作之仪表盘控件如何设置
  • GitLab 公共仓库:coding 用到的 git 命令
  • Springboot社区养老保险系统小程序
  • 一文理清 Linux 软件管理核心知识:从程序组成到包管理工具
  • Java面试宝典:MySQL8新特性
  • shell学习从入门到精通(第二部分)
  • 机器学习sklearn:决策树的参数、属性、接口
  • nccl中__syncthreads的作用及例子 (来自deepseek)
  • 135端口与WMI攻防全解析
  • 网络安全基础知识【4】
  • python中类变量 __slots__ 解析