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 插槽简介及使用示例
Nov 19 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 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
一个典型的PHP分页实例代码分享
2011/07/28 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
django接入新浪微博OAuth的方法
2015/06/29 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
小学清明节活动方案
2014/03/08 职场文书
大学生社团活动总结
2014/04/26 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
煤矿安全保证书
2015/02/27 职场文书
2015年社区工作总结
2015/04/08 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS