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+vant实现购物车全选和反选功能
Nov 17 Vue.js
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
php利用事务处理转账问题
2015/04/22 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
Python读取csv文件实例解析
2019/12/30 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Django model class Meta原理解析
2020/11/14 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
党章学习思想汇报
2014/01/14 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python