温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue + iView如何实现Excel上传功能

发布时间:2021-06-22 11:03:59 来源:亿速云 阅读:310 作者:小新 栏目:开发技术

这篇文章给大家分享的是有关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>
     <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上传功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI