vue+el-upload实现上传excel

最新推荐文章于 2024-08-05 15:11:23 发布
最新推荐文章于 2024-08-05 15:11:23 发布
阅读量1.9k 收藏 9
点赞数 2
文章标签： javascript vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37842761/article/details/110918739
版权
本文介绍如何在Vue项目中利用el-upload组件上传Excel文件。通过配置action、show-file-list、before-upload和http-request等属性实现上传功能。在before-upload中进行校验，若设置auto-upload为false，则需在http-request中处理请求。成功上传后，可通过on-success回调处理返回数据并展示在页面上。
摘要由CSDN通过智能技术生成

先大概了解一下这个组件的属性和方法：
在这里插入图片描述
action：看官网就知道了，指定上传的路径，但是一般vue项目里我们的请求路径不会写在这里。
show-file-list：是否显示你上传的文件，true的话它会在一个ul里显示
before-upload：顾名思义，上传之前的一些操作，我把校验写在这里了。
注意：:auto-upload="false"时before-upload不生效，所以她两选择一个便好。

 beforeUpload(file) {
   
        const Xls = file.name.split('.'
最低0.47元/天 解锁文章
活的太明白还是想的太简单
关注
vue使用el-upload实现formData文件上传功能
FellAsleep的博客
11-17 912
在底部确认按钮点击的时候 使用fd.append(‘key’,value) 整合为formData 格式。最开始单个文件上传 没用到element el-upload 组件。//多文件上传 用到了el-upload组件。这是后端以文件流形式返回的结果。//这里只能实现单个文件上传。
elemetUi 组件–el-upload实现上传Excel文件的实例
11-26
elemetUi 组件–el-upload实现上传Excel文件的实例 【需求】实现上传Excel文件，在上传到服务器时，还要附加一个参数，在请求上传文件接口前，先要进行文件格式判断。 【知识点】 　　1、el-upload 官方文档中，主要用到了以下属性： data 可选参数, 上传时附带的额外参数 name 可选参数, 上传的文件字段名 before-upload 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 　　2、split进行字符串截取 【分析】 <d
vue使用element的el-upload标签做Excel导入功能
四夕木木夕木木的博客
11-22 3274
通常在写后台管理系统时我通常会使用Vue+Element，今天就来说一下在后台管理中如何实现Excel导入功能。 Excel导入功能基于Vue+Element+xlsx插件 1、首先安装xlsx插件： npm install xlsx 或 cnpm install xlsx 2、在需要用到的页面中导入插件： import XLSX from 'xlsx' 3、具体实现如下： &...
el-upload 自定义上传
最新发布
qq_43901960的博客
08-05 237
el-upload 自定义上传
Vue el-upload组件上传(导入)excel文件、点击按钮上传
林中明月间丶
10-13 8493
vue项目使用element组件上传excel文件 - 爱喝可乐的靓仔 - 博客园 <button @click="impoortExcel">导入excel文件</button> <!-- 导入模板文件 --> <el-dialog title="导入模板文件" :visible.sync="fileDialogVisible" width="50%" :close-on-click-modal="fal
Vue2使用el-upload做excel上传导入功能
章小鱼的博客
09-05 1696
【代码】Vue2使用el-upload做excel上传导入功能。
使用element-ui的el-upload进行excel文件上传与下载
WX_nbclass的博客
10-11 7603
使用element-ui的el-upload进行excel文件上传与下载，el-upload设置responseType方法
VUE利用el-upload实现文件上传的功能，后端获取文件数据
热门推荐
振云博客
06-25 1万+
vue点击组件弹出窗口 <span class="tool-btn" @click="opendialog()"> <i class="table-tool-btn add-icon"></i> 批量新增 </span> 在方法中定义一个控制器 export default {data(){ return{ files:[], open:false, } }, methods: { opendialog() { this.open =
前端利用el-upload实现Excel导入
LewisRoc的博客
06-26 1886
首先说明一下这里前端只是前端利用el-upload上传了Excel文件，excel的解析工作是由后端同事利用阿里的easyexcel来解析的，所以说这个方法只适用于后端解析excel的方式。下边是效果图： 可以点击上传Excel也可以拖拽，样式可根据个人需要修改。 下边是组件代码： <template> <div class="upload-excel"> <el-upload drag class="upload-demo"
el-upload组件实现本地上传excel文件到服务器(导入)
User_Name9999的博客
07-07 2122
前端导入excel功能
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
主要介绍了elemetUi 组件--el-upload实现上传Excel文件的实例的相关资料,希望通过本文大家能够实现这样的功能，需要的朋友可以参考下
vue3+ts 使用el-upload上传excel文件并自定义发送请求
PhoenixGuangyu的博客
05-24 1556
【代码】vue3+ts 使用el-upload上传excel文件并自定义发送请求。
使用 el-upload 和 xlsx 上传 xlsx文件
张小胖
04-02 1785
一、安装 xlsx cnpm i xlsx 二、在 vue 中使用 我这边是使用element 里面的el-upload 组件上传方法 <el-upload ref="upload" action="" accept=".csv" :headers="myHeaders" :on-change="upload" :http-request="handleHttpRequestImg" :sho...
上传excel文件
凡尘
08-14 1807
excel文件上传
Vue+ElementUI+el-upload上传xlsx/xls/csv文件、组件、el-upload 清空上传文件
林中明月间丶
05-17 2050
【代码】Vue+ElementUI+el-upload上传xlsx/xls/csv文件、组件。
el-upload上传文件前端自己读取excel
MR.杜的博客
03-27 842
1.读取方法 需要下载xlsx依赖。
Vue：使用elementUI upload组件上传excel文件
Joe
12-07 3164
上传文件
elementui 上传excel文件
qq_42734999的博客
08-22 7413
html部分 http-request：覆盖默认的上传行为，可以实现自定义上传 on-exceed：文件超出个数限制时的钩子 <el-upload class='image-uploader' :multiple='false' :auto-upload='true' list-type='text' :show-file-list='true' :before-upload="bef...
vue+element-ui实现导入excel的demo
05-25
以下是一个基于 Vue 和 Element UI 的导入 Excel 的示例代码： ```vue <template> <div> <el-upload class="upload-excel" :before-upload="beforeUpload" :on-success="onUploadSuccess" :on-error="onUploadError" :file-list="fileList" :accept=".xlsx,.xls" :auto-upload="false" > <el-button slot="trigger" type="primary">选择文件</el-button> <el-button slot="append" type="success" :disabled="!fileList.length" @click="uploadExcel">上传</el-button> <div slot="tip" class="el-upload__tip">只能上传 .xlsx 或 .xls 文件</div> </el-upload> </div> </template> <script> import XLSX from 'xlsx' export default { data() { return { fileList: [] } }, methods: { beforeUpload(file) { // 校验文件类型 const isXLS = file.type === 'application/vnd.ms-excel' const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' const isExcel = isXLS || isXLSX if (!isExcel) { this.$message.error('只能上传 .xlsx 或 .xls 文件') return false } // 添加到 fileList 中 this.fileList.push(file) return false // 阻止自动上传 }, onUploadSuccess(response) { // 上传成功后的处理逻辑 this.$message.success('上传成功！') }, onUploadError(error) { // 上传失败后的处理逻辑 this.$message.error('上传失败！') }, uploadExcel() { // 读取 Excel 文件内容，此处使用了 xlsx 库 const file = this.fileList[0] const reader = new FileReader() reader.onload = (e) => { const data = e.target.result const workbook = XLSX.read(data, { type: 'binary' }) const sheetName = workbook.SheetNames[0] const worksheet = workbook.Sheets[sheetName] const json = XLSX.utils.sheet_to_json(worksheet) console.log(json) // 打印 Excel 数据 } reader.readAsBinaryString(file.raw) } } } </script> ``` 解释一下： 1. 组件中包含一个 `el-upload` 组件，用于上传 Excel 文件。 2. `beforeUpload` 方法用于校验文件类型，并将文件添加到 `fileList` 中。 3. `onUploadSuccess` 和 `onUploadError` 分别是上传成功和上传失败的回调函数。 4. `uploadExcel` 方法用于读取 Excel 文件内容，使用了 `xlsx` 库将 Excel 数据转换成 JSON 数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值