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 18 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue elementUI批量上传文件
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 判断常量,变量和函数是否存在
2009/04/26 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
社区党务公开实施方案
2014/03/18 职场文书
交通安全责任书范本
2014/07/24 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
《给予树》教学反思
2016/03/03 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
500字作文之周记
2019/12/13 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python