vue上传excel并展示_（一）vue导入上传excel功能

1、excel上传功能

ref="upload"

:show-upload-list="false"

:default-file-list="defaultList"

:on-success="handleSuccess"

:on-error="handleError"

:format ="['xlsx','xls']"

:max-size="fileSize"

:on-format-error="handleFormatError"

:on-exceeded-size="handleMaxSize"

:before-upload="handleBeforeUpload"

action="//jsonplaceholder.typicode.com/posts/"

style="display: inline-block;width:58px;">

购买明细表

/*文件上传操作*/

import util from '@/libs/util.js';

export default {

name: 'insurance-data-import',

data () {

return {

fileName:'',

fileTemArr:['购买明细表','索赔记录表'],

fileSize:10,

defaultList:[],

};

mounted:function(){

methods: {

handleSuccess(res,file){

if(res.errcode === 0){

this.$Message.success("数据导入成功！")

this.$refs.upload.clearFiles()

}

handleError(error,file){

this.$Message.error("数据导入失败！")

handleFormatError (file) {

this.$Notice.warning({

title: '文件格式不正确',

desc: '文件 ' + file.name + ' 格式不正确，请上传.xls,.xlsx文件。'

});

handleMaxSize (file) {

this.$Notice.warning({

title: '文件大小错误',

desc: 'File ' + file.name + ' 文件大小不得超过'+this.fileSize+'M'

});

pro (file) {

return new Promise((resolve, reject) => {

setTimeout(() => {

this.$Notice.warning({

title: '文件名称错误',

desc: 'File ' + file.name

});

reject(new Error('err'))

}, 100)

})

//阻止上传//上传前判断用户选择的模板与实际上传的模板是否相同(文件名判断)

handleBeforeUpload (file) {

let name = '';

if(file.name){

// name = file.name.replace(/\s/g,"").split('.')[0]

name = file.name.split('.')[0]

alert(name)

if(name !== this.fileName){

return this.pro(file)

}

};

vue上传excel并展示_（一）vue导入上传excel功能相关推荐

excel自动筛选_具有范围内条件的Excel自动筛选
excel自动筛选 In Excel 2003, and earlier versions, an AutoFilter allows only two criteria for each colum ...
传智python15期_【转载】2018传智播客黑马python人工智能15期视频教程
├─01 网络编程 │ ├─01-基本概念 │ │ 01-网络通信概述.flv │ │ 02-IP地址.flv │ │ 03-Linux.windows查看网卡信 ...
vue 2个方法先后执行_浅析Vue的2个版本
一.@vue/cli用法安装 npm npm install -g @vue/cli yarn yarn global add @vue/cli 安装完成后可以使用 vue create 来创建一个 ...
vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话第412篇// 正文共:1800 字// 预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
lisp倒入excel数据画图_坐标数据怎样导入进CAD中画图
如果坐标数据比较多的时候,我们还可以在CAD中导入坐标数据画图.接下来就是学习啦小编精心整理的一些关于坐标数据怎样导入进CAD中画图的相关资料,供你参考. 坐标数据导入进CAD中画图的方法 1.利用E ...
vue代码怎么变成小程序_使用vue编写h5公众号跳转小程序的实现代码
前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_App ...
excel操作练习_你见过最好的Excel教程有哪些？
教程领到手,学习不用愁!领答案找一套知识兔Excel教程,学习Excel基本功能,学习Excel高频应用技能--之后很简单,就是反复的练,刻意的练习,不然就多应用.兴趣使然,以应用为导向,学以致用, ...
python合并excel工作簿_使用Python将多个excel的多个sheet页合并到一个excel
使用Python将多个excel的多个sheet页合并到一个excel ##读取Excel文件 import xlrd ##将文本写入excel文件 import xlsxwriter ##读取exc ...

vue上传excel并展示_（一）vue导入上传excel功能

vue上传excel并展示_（一）vue导入上传excel功能相关推荐

最新文章

热门文章