没有合适的资源?快使用搜索试试~ 我知道了~
SpringBoot+AntDesignVue实现excel导入功能
需积分: 32 464 浏览量
2022-07-20
08:54:50
上传
评论
收藏 198KB PDF 举报
温馨提示
本文介绍了如何使用SpringBoot和AntDesignVue实现excel导入功能。主要使用了Ant Design Vue中的upload样式组件,前端实现时使用了a-upload标签,并在项目中引入了Ant Design Vue UI库的支持。其中,accept属性表示只支持excel导入,customRequest属性表示使用自定义方法代替默认方法去实现文件导入/上传操作。同时,@change事件用于在文件上传中、完成、失败时进行相应的处理。
资源推荐
资源详情
资源评论























SpringBoot+AntDesignVue实现excel导⼊功能
实现导⼊功能主要还是使⽤ Ant Design Vue 中的 upload 样式组件
⼀) 前端实现
这段代码中 a-upload 标签实在你项⽬中引⼊了 Ant Design Vue UI库的⽀持下使⽤的⼀个导⼊组件
accept 中这段代码表⽰你导⼊时所选⽂件只⽀持 excel 导⼊【.xlsx 或 .xls 都⽀持】
customRequest 表⽰⾃定义⽅法代替默认⽅法去实现⽂件导⼊/上传操作
@change 事件是在⽂件上传中、完成、失败都会调⽤这个函数。
disabled 是否禁⽤上传组件
a-button 创建⼀个操作按钮,type 为 primary 表⽰这是⼀个主要按钮,icon 表⽰为按钮设置⼀个图标,disabled是否禁⽤此按钮
<a-upload
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
:customRequest="customRequest"
@change="customChange"
:disabled="uploadDisabled">
<a-button type="primary" :icon="uploadIcon" :disabled="uploadDisabled">导⼊</a-button>
</a-upload>
1) 属性定义
将上⾯⾃定义的属性在data中定义好
to-top 的样式为这个:这个样式也是⽤的 Ant Design Vue 中的 icon图标库
export default {
data() {
return {
//
导⼊
excel
时的
icon
图标
uploadIcon: 'to-top',
//
导⼊
excel
时是否禁⽤上传按钮
uploadDisabled: false
}
}
}
2) ⽅法实现
⾃定义实现⽅法,参数 data 就是上传⽂件的信息
data.file 是上传⾄后台的 excel ⽂件
上传⽂件必须要通过创建 FormData 对象进⾏传参
batchImportGetRecord 是我的项⽬中⾃定义上传⽂件的⽅法,是利⽤ axios 请求封装好的⽅法,也可以使⽤ ajax ,实际代码编写需要按照⾃⼰项⽬中封装好
的⽹络请求来进⾏编写
finally 块表⽰请求成功或是失败都会执⾏的操作
资源评论


novker
- 粉丝: 7
- 资源: 15
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


安全验证
文档复制为VIP权益,开通VIP直接复制
