VUE上传表格文件发送后端,后端解析以及上传文件,前端进行解析的实现方法
首先来说前端上传表格,然后利用纯前端技术进行解析表格的办法
详细步骤----请点击这里
接下来来说上传发送给后端的代码实现
html
<input ref="myInput" type="file" class="my_input" :multiple="myMultiple" style="display:none;" @change="importExcel">
<el-button type="primary" style="width:150px;" :disabled="item.updisabled" size="small" @click="myOpen()">上傳</el-button>
script
import myComValid from '../co-assets/com-valid.js'
import myCom from '../co-assets/com-fun' // 这里只有个弹框函数,就不放了
import Request from '../co-assets/request.js' // 这个是请求函数,和其他的AXIOS一样,只不过稍微封装了一下下,可以改为原来的axios请求方式
// 数据
myMultiple: true
fun
// 方法
myOpen() {
setTimeout(() => {
this.$refs.myInput.click()
}, 500)
}
/**
* 導入
*/
async importExcel(e) {
// console.log('上传了')
this.formData[this.currentFlag]['fileName'] = '正在上传,请稍后...'
this.loading = true
this.loadingTest = '正在上传文件,请稍后...'
const files = e.target.files
if (files.length <= 0) {
return false
} else if (files.length > 2) {
myCom.alert('上传数量有误(正确数量为1-2个),请重新选择文件!')
this.loading = false
return false
} else {
Object.values(files).every(_ => {
// 循环检查所有文件是否都是xlsx
if (!/\.(xlsx)$/.test(_.name.toLowerCase()) || myComValid.validNoTest(_.name)) {
myCom.alert('請重新上傳,文件必须为xlsx格式且文件名不可包含汉字!')
this.loading = false
return false
}
})
}
const url = myUrl +'/uploadfile'
const myformdataFile = new FormData()
if (e.target.files.length > 1) {
myformdataFile.append('file', e.target.files[0])
myformdataFile.append('file', e.target.files[1])
} else {
myformdataFile.append('file', e.target.files[0])
}
if (this.currentFlag === 'header') {
myformdataFile.append('files', this.filename)
}
myformdataFile.append('actiontime', this.topForm.version.value)
try {
const res = await Request.httpRes(
'post',
url,
myformdataFile,
false,
'Success!',
'上傳文件失敗,請重新上傳!'
)
if (res && res.status === 'Success') {
res.msg && this.$message.success(res.msg)
} else {
res.msg && this.$message.error(res.msg)
this.setErrorUpload(res)
}
} catch (err) {
this.$message.error('執行操作失敗,請重試!')
this.setErrorUpload()
}
var input = this.$refs.myInput
input.value = ''
},
// 導入
下面是正则验证函数
com-valid.js
export default {
/**
* 验证IP
* @param {String} ip
*/
validIp(ip) {
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
return reg.test(ip)
},
/**
* 检测是否包含文字
* @param {String} str
*/
validNoTest(str) {
const reg = /[\u4e00-\u9fa5]+/g
return reg.test(str)
},
/**
* 检测是否包含文字或者空格
* @param {String} str
*/
validNoTest1(str) {
const reg = /[\u4e00-\u9fa5\s]+/g
return reg.test(str)
}
}
VUE上传表格文件发送后端,后端解析以及上传文件,前端进行解析的实现方法的更多相关文章
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- 使用elementUI的时候,使用Upload 上传的时候,使用 list-type 属性来设置文件列表的样式,before-upload方法失效
最近在做项目的时候,使用elementUI的时候,使用Upload 上传的时候,before-upload方法失效. 情况下:使用 list-type 属性来设置文件列表的样式. 最终的优化之后:(演 ...
- DEX文件解析---2、Dex文件checksum(校验和)解析
一.checksum介绍 checksum(校验和)是DEX位于文件头部的一个信息,用来判断DEX文件是否损坏或者被篡改,它位于头部的0x08偏移地址处,占用4个字节,采用小端序存储. ...
- DEX文件解析--7、类及其类数据解析(完结篇)
一.前言 前置技能链接: DEX文件解析---1.dex文件头解析 DEX文件解析---2.Dex文件checksum(校验和)解析 DEX文件解析--3.d ...
- DEX文件解析--4、dex类的类型解析
一.前言 前几篇系列文章链接: DEX文件解析---1.dex文件头解析 DEX文件解析---2.Dex文件checksum(校验和)解析 DEX文件解析--3.dex文件 ...
- DEX文件解析--6、dex文件字段和方法定义解析
一.前言 前几篇文章链接: DEX文件解析---1.dex文件头解析 DEX文件解析---2.Dex文件checksum(校验和)解析 DEX文件解析--3. ...
- Yii框架和Vue的完美结合完成前后端分离项目
背景说明 本文假设你对Yii和Vue都比较熟悉,至少都在项目里用过,另外笔者新人,以后不定时放一些干货,欢迎程序媛关注 Yii是一个PHP全端框架,典型的mvc的项目结构,后端接口都是一个控制器里放了 ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
(1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...
- Vue学习笔记-Django REST framework3后端接口API学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- 基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息
技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...
随机推荐
- C# String.IsNullOrEmpty()方法的使用
IsNullOrEmpty(string)是String类的一个有参的方法,方法需要类的调用,所以String.IsNullOrEmpty(string) IsNullOrEmpty是判断字符串的Nu ...
- .Net Core 3.0 对 MongoDB 的多条件(两种)查询操作
前言 在日常开发中,偶尔会用到 MongoDB 的数据操作,也花费了一些时间调试,因此在此处记录一下,共同进步. 废话少说,出招吧! 正文 2.1 准备工作 首先需要引入 .Net 平台链接 Mo ...
- OS-HACKNOS-2.1靶机之解析
靶机名称 HACKNOS: OS-HACKNOS 靶机下载地址 https://download.vulnhub.com/hacknos/Os-hackNos-1.ova 实验环境 : kali 2. ...
- 😊SpringBoot 整合 Elasticsearch (超详细).md
SpringBoot 整合 Elasticsearch (超详细) 注意: 1.环境搭建 安装es Elasticsearch 6.4.3 下载链接 为了方便,环境使用Windows 配置 解压后配置 ...
- Windows骚操作
电脑常用的快捷键 键盘功能健:Tab.Shift.Ctrl.Alt.Windows.Enter.空格.上下左右健.CapsLock(大小写转换).NumLock(对小键盘控制开/关) 键盘快捷键:全选 ...
- Dive into TensorFlow系列(1)-静态图运行原理
接触过TensorFlow v1的朋友都知道,训练一个TF模型有三个步骤:定义输入和模型结构,创建tf.Session实例sess,执行sess.run()启动训练.不管是因为历史遗留代码或是团队保守 ...
- EBI、DDD及其演变架构史
一.引子 聊架构总离不开"领域驱动架构",大多能聊到DDD(Domain-Driven Design),实际上早期思想EBI架构 1992年就诞生了.核心价值点在于:关注核心业务领 ...
- 微信小程序的学习(二)
一.数据绑定 1.数据绑定的基本原则 在 data 中定义数据 在 wxml 中使用数据 2.如何在 data 里面定义数据? 在页面对应的 .js 文件中,把数据定义到 data 对象中即可: 3. ...
- 造个Python轮子,实现根据Excel生成Model和数据导入脚本
前言 最近遇到一个需求,有几十个Excel,每个的字段都不一样,然后都差不多是第一行是表头,后面几千上万的数据,需要把这些Excel中的数据全都加入某个已经上线的Django项目 这就需要每个Exce ...
- 09 | 从容器到容器云:谈谈Kubernetes的本质
你好,我是张磊.今天我和你分享的主题是:从容器到容器云,谈谈Kubernetes的本质. 在前面的四篇文章中,我以Docker项目为例,一步步剖析了Linux容器的具体实现方式.通过这些讲解你应该能够 ...