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上传的资料请关注开心学习网其它相关文章!
您可能感兴趣
- dockernginx服务器教程(Docker镜像+nginx 部署 vue 项目的方法)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue2.0自定义指令(vue2实现provide inject传递响应式)
- vue如何加速(vue函数防抖与节流的正确使用方法)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- vue验证码怎么用(vue验证码组件使用方法详解)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- vue中的定时函数(vue计时器的实现方法)
- vue怎么实现预览与放大(Vue实现牌面翻转效果)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue插槽实例(Vue中插槽slot的使用方法与应用场景详析)
- vuevlog制作软件(Vue实现Dialog封装)
- vue代码统计(Vue实现计数器案例)
- 泰国美女(泰国人妖和女性如何区分)
- 泰国旅游业怎么样(泰国的旅游产业)
- 越南新娘(越南新娘婚介网站)
- 越南新娘(越南新娘骗婚套路流程)
- 菲律宾游学(菲律宾游学中介机构)
- 菲律宾美食(菲律宾美食排行榜前十名)
热门推荐
- 操作mysql的jdbc(JDBC连接的六步实例代码与mysql连接)
- js事件冒泡与事件捕获(基于事件冒泡、事件捕获和事件委托详解)
- oracle RMAN CONFIGURE配置项
- 聊天室python小程序(用Python写一个模拟qq聊天小程序的代码实例)
- dedecms标签怎么调用(dedecms首页调用随机文章及自动更新功能实例)
- vue中如何判断请求状态码(关于VUE的编译作用域及slot作用域插槽问题)
- laravel框架怎么获取变量(解决laravel id非自增 模型取回为0 的问题)
- h1标签的作用
- mysqlexplain各个字段作用(MySQL EXPLAIN语句的使用示例)
- Flash遮盖其它层,z-index无效
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9