Vue + iView实现Excel上传功能的完整代码


Posted in Vue.js onJune 22, 2021

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>
     <div v-if="uploadingFile !== null">待上传文件:
          <span class="blueFont">{{ fileName }}</span>
          <Button @click="uploadFun(index)" :loading="loadingStatus" class="manualUploadBtn">{{ loadingStatus ? '上传中...' : '点击开始上传' }}</Button>
      </div>
</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.stringify(res.data);
					    // console.log(this.infoList[index].content);
                        this.$Message.success("上传成功!");
                    }else{
                        this.$Message.error(res.message);
                    }
				}).finally(()=>{
					this.loadingStatus = false;
                    this.uploadLoading = false;
                })
			},
        }
    }

3、页面效果如下

(1)进入页面默认展示的样子

Vue + iView实现Excel上传功能的完整代码

 (2)选中要上传的Excel

Vue + iView实现Excel上传功能的完整代码

 (3)“点击开始上传”之后

Vue + iView实现Excel上传功能的完整代码

 Vue + iView实现Excel上传功能的完整代码

以上就是Vue + iView实现Excel上传的详细内容,更多关于vue iview excel上传的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
全面解析Vue中的$nextTick
Dec 24 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Vue过滤器(filter)实现及应用场景详解
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 #Vue.js
Vue中插槽slot的使用方法与应用场景详析
You might like
session在PHP大型web应用中的使用
2011/06/25 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
WebPack基础知识详解
2017/01/16 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
vue中如何使用ztree
2018/02/06 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
python drf各类组件的用法和作用
2021/01/12 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
主办会计岗位职责
2014/03/13 职场文书
预备党员公开承诺书
2014/05/28 职场文书
质量负责人任命书
2014/06/06 职场文书
应急处置方案
2014/06/16 职场文书
展览会邀请函
2015/02/02 职场文书
五一劳动节活动总结
2015/02/09 职场文书
单位证明范文
2015/06/18 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js