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 块表⽰请求成功或是失败都会执⾏的操作
资源评论
