vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
类别:编程学习 浏览量:1499
时间:2021-10-26 11:14:27 vue如何excel表格上传功能
Vue + iView实现Excel上传功能的完整代码1、HTML部分
<Col span="2">上传文件:</Col> <Col span="22" class="uploadExcelBox"> <Upload ref="uploadExcel" :loading="uploadLoading" :action="uploadFileUrl" accept="xlsx,xls" :format="uploadFormat" :before-upload="beforeImgFile" :on-success="successImgFile" :on-error="errorImgFile" :show-upload-list="true"> <Button type="success">上传附件</Button> </Upload> <li v-if="uploadingFile !== null">待上传文件: <span class="blueFont">{{ fileName }}</span> <Button @click="uploadFun(index)" :loading="loadingStatus" class="manualUploadBtn">{{ loadingStatus ? '上传中...' : '点击开始上传' }}</Button> </li> </Col>
2、JS部分
<script> // import excel from '@/libs/excel' import service from '@/libs/request' //用来取当前域名 import reportFormApi from '@/api/reportForm' export default { data() { return { uploadLoading:false,//上传控件loading状态 uploadFileUrl: "", uploadFormat:['xlsx','xls'], uploadingFile:null,//待上传的文件 loadingStatus:false,//upload组件的状态 fileName:"",//待上传文件的名称 } }, mounted() { this.uploadFileUrl = service.apiUrl + "/qingximaster/winInfo/execlAdd";//上传Excel的接口路径,后端人员提供。 }, methods: { // 图片上传之前 beforeImgFile(file) { // console.log(file); const fileExt = file.name.split('.').pop().toLocaleLowerCase() if (fileExt === 'xlsx' || fileExt === 'xls') { var formdata = new FormData(); formdata.append("file",file); this.fileName = formdata.get('file').name;//通过formdata.get('file')方法,可以取file文件里的信息,例如Excel的文件名。 this.uploadingFile = formdata;//注意:这个将作为参数传给接口实现上传。传给接口的file不需要 formdata.get('file'),直接传file。 } else { this.$Notice.warning({ title: '文件类型错误', desc: '文件:' + file.name + '不是EXCEL文件,请选择后缀为.xlsx或者.xls的EXCEL文件。' }) } return false }, // 上传成功 successImgFile(response, file, fileList) { this.$Notice.success({ title: '提示', desc: '上传成功!' }) }, // 上传失败 errorImgFile(error, file, fileList) { this.$Notice.success({ title: '提示', desc: '上传失败!' }) console.log(error); }, uploadFun(index){//调接口上传Excel this.loadingStatus = true; reportFormApi.uploadExcel({ url: this.uploadFileUrl, file: this.uploadingFile }).then(res =>{ this.uploadingFile = null; this.fileName = ""; if(res.code==0){ this.infoList[index].content = JSON.stri.jpg" alt="vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)" border="0" />
3、页面效果如下
(1)进入页面默认展示的样子
(2)选中要上传的Excel
(3)“点击开始上传”之后
以上就是Vue + iView实现Excel上传的详细内容,更多关于vue iview excel上传的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue 底层原理(浅谈Vue插槽实现原理)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- vue十大基础知识(vue实战中的一些实用小魔法汇总)
- vue点击导航进行内容切换(vue实现顶部左右滑动导航)
- vue项目上线教程(vue项目中使用骨架屏的方法)
- vue购物车简单项目(vue实现简单购物车案例)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vue功能测试和生产环境切换(vue 单元测试的推荐插件和使用示例)
- vue 组件如何转换虚拟dom(Vue源码分析之虚拟DOM详解)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vue身份验证(详解vue身份认证管理和租户管理)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
- 红色代表什么(红色代表什么情感和含义)
热门推荐
- python用列表实现一个定时器(python 定时器,实现每天凌晨3点执行的方法)
- python模块使用方法(详解python的argpare和click模块小结)
- linux虚拟内存实现需要哪六种机制(解析Linux高性能网络IO和Reactor模型)
- laravel后台登录教程(Laravel 默认邮箱登录改成用户名登录的实现方法)
- python中的reload(搞清楚 Python traceback的具体使用方法)
- element加固态(Element Plus实现Affix 固钉)
- laravel如何使用预处理(Laravel项目中timeAgo字段语言转换的改善方法示例)
- php语言程序设计基础面向对象(PHP面向对象程序设计之对象的遍历操作示例)
- apache 配置域名(apache 二级域名解析 window与linux)
- dedecms文章顺序(dedecms 分页标题提取方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9