重要代码已标红

用到的插件组件

npm i element

npm i xlsx

vue3 引入写法有差异 具体自行百度

html：

<div class="crenter">

<div>

<el-card class="box-card">

<el-upload ref="upload" accept=".xls,.xlsx"  action="#"  :auto-upload="false"

:multiple="false" :file-list="fileList"  :before-upload="beforeUpload"

:http-request="uploadHttpRequest"  :on-remove="fileRemove"    :on-change="fileChange"

drag   >

<img class="upImg" src="../../style/img/up.png" alt="" />

<el-button class="buttonUp" type="primary">上传excel</el-button>

<div class="el-upload__text">或者拖放一个文件</div>

</el-upload>

</el-card>

<div class="el-upload__tip">只能上传excel文件，且不超过500kb</div>

</div>

<div>

<el-button style="width: 450px; margin: 20px auto; padding: 15px" type="primary"         @click="submitUpload">确认上传</el-button>

</div>

</div>

js：

引入组件

import XLSX from '../../../node_modules/xlsx'

export default {

data() {

return {

options: [

{

value: 1,

label: '整包',

},

{

value: 2,

label: '散包',

},

{

value: 3,

label: '单一来源',

},

],

is_type: '',

action: process.env.VUE_APP_BASE_API + '/business/BizMaterialSum/importData',

// 用户导入参数

fileList: [],

// 读取

defaultIndex: 0, // 默认显示第一个工作表

wb: null, // 工作表对象

formData: {},

}

},

created() {},

methods: {

beforeUpload(file) {

//文件类型

const isType = file.type === 'application/vnd.ms-excel'

const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

const fileType = isType || isTypeComputer

if (!fileType) {

this.$message.error('上传文件只能是xls/xlsx格式！')

}

// 文件大小限制为10M

const fileLimit = file.size / 1024 / 1024 < 10

if (!fileLimit) {

this.$message.error('上传文件大小不超过10M！')

}

return fileType && fileLimit

},

// 自定义上传方法，param是默认参数，可以取得file文件信息，具体信息如下图

uploadHttpRequest(param) {

// const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加

// formData.append('file', param.file) //添加文件对象

// formData.append('uploadType', this.is_type) //接口要传的参数

// // 调用接口api

// importData(formData).then((data) => {

//   if (data.code == 200) {

//     this.msgSuccess('成功')

//     param.onSuccess() // 上传成功的文件显示绿色的对勾

//     this.fileList = []

//     this.is_type = ''

//   } else {

//     this.msgError(data.msg)

//   }

// })

},

// 点击上传：手动上传到服务器，此时会触发组件的http-request

submitUpload() {

if (this.is_type && this.fileList) {

// this.$refs.upload.submit()

// console.log(this.formData)

importData(this.formData).then((data) => {

if (data.code == 200) {

this.msgSuccess('成功')

this.fileList = []//清空上传的文件展示列表

this.is_type = ''

this.$refs.upload.clearFiles()//清空已上传的文件列表（该方法不支持在 before-upload 中调用）

} else {

this.msgError(data.msg)

}

})

} else if (this.is_type && this.fileList.length == 0) {

this.msgError('请选择上传文件')

} else if (!this.is_type && this.fileList.length != 0) {

this.msgError('请选择导入模式')

} else if (!this.is_type && this.fileList.length == 0) {

this.msgError('请选择导入模式和上传文件')

}

},

// 移除选择的文件

fileRemove(file, fileList) {

if (fileList.length < 1) {

this.uploadDisabled = true //未选择文件则禁用上传按钮

}

},

// 取消

closeDialog() {

this.$refs.upload.clearFiles() //清除上传文件对象

this.fileList = [] //清空选择的文件列表

this.$emit('close', false)

},

// 文件发生改变

fileChange(file, fileList) {

// if (fileList.length > 0) {

//   this.fileList = [fileList[fileList.length - 1]] // 展示最后一次选择的文件

// }

// console.log(file)

this.formData = {

Name: file.name,

IsType: this.is_type,

}

let files = { 0: file.raw }

this.readExcel(files)

},

// 导入用XLSX读取文档

readExcel(files) {

var that = this

// 如果没有⽂件名

if (files.length <= 0) {

return false

} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {

this.$Message.error('上传格式不正确，请上传xls或者xlsx格式')

return false

}

const fileReader = new FileReader()

fileReader.onload = (ev) => {

try {

const data = ev.target.result

const workbook = XLSX.read(data, {

type: 'binary',

})

// 取第⼀张表

const wsname = workbook.SheetNames[0] //

// ⽣成

// 表格内容

const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])

console.log(ws, 'ws是表格⾥的数据，且是json格式')

let list = ws.map((item) => {

return {

Coding: (item.物料编码)+'',

Name: (item.物料名称)+'',

Specification: (item.规格型号)+'',

Units: (item.计量单位)+'',

AllName: (item.全名)+'',

ApplyNumber: (item.申请数量),

AdjustNumber: (item.调剂后数量),

Remark: (item.备注)+'',

}

})

this.formData.BizMaterialSon = list

// 重写数据

this.$refs.upload.value = ''

} catch (e) {

return false

}

}

fileReader.readAsBinaryString(files[0])

},

},

}

</script>

css：掺杂了一些其他的代码

<style scoped lang="scss">

.title {

text-align: center;

font-size: 70px;

font-weight: 600;

}

.crenter {

width: 450px;

margin: 20px auto;

}

.select {

position: relative;

}

.selectright {

width: 450px;

margin: 20px auto;

}

.selectLeft {

width: 410px;

position: absolute;

left: 54%;

top: 0;

}

.upload-demo {

width: 100%;

}

.upImg {

width: 150px;

// height: 100px;

margin: 10px auto;

}

</style>

<style scoped>

.upload-demo >>> .el-upload-dragger {

border: none;

height: 250px !important;

width: 100%;

}

.box-card >>> .el-upload-dragger {

border: none;

height: 208px !important;

width: 100%;

}

.el-card.is-always-shadow {

-webkit-box-shadow: 0 2px 12px 0 #f0f0f0;

box-shadow: 0px -6px 20px 0 #f0f0f0;

border: none;

}

.box-card >>> .el-upload {

display: block !important;

}

.buttonUp {

display: block;

width: 140px;

padding: 15px;

border-radius: 5px;

margin: 0px auto;

margin-bottom: 10px;

}

.el-upload__tip {

text-align: center;

color: #a7a3a2;

padding: 20px;

box-shadow: 0px 4px 14px 0px #f0f0f0;

margin-top: 0px;

}

</style>

整合：一整个页面里的代码，可以复制过去自己修改

<template>

<div class="app-container home">

<div style="padding-top: 30px">

<div class="title">上传excel导入物料采购单</div>

<div class="select">

<div class="selectright">

<el-form>

<el-form-item label="导入模式">

<el-select v-model="is_type" placeholder="请输入导入模式">

<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>

</el-select>

</el-form-item>

</el-form>

</div>

<div class="selectLeft">

<span style="color: red">*</span>

打包为整包、散包、单一来源；为整包时，填写价格时不可填写0，且每个都必填；为散包时，价格可填写为0。

</div>

</div>

<div class="crenter">

<div>

<el-card class="box-card">

<el-upload

ref="upload"

accept=".xls,.xlsx"

action="#"

:auto-upload="false"

:multiple="false"

:file-list="fileList"

:before-upload="beforeUpload"

:http-request="uploadHttpRequest"

:on-remove="fileRemove"

:on-change="fileChange"

drag

>

<img class="upImg" src="../../style/img/up.png" alt="" />

<el-button class="buttonUp" type="primary">上传excel</el-button>

<div class="el-upload__text">或者拖放一个文件</div>

</el-upload>

</el-card>

<div class="el-upload__tip">只能上传excel文件，且不超过500kb</div>

</div>

<div><el-button style="width: 450px; margin: 20px auto; padding: 15px" type="primary" @click="submitUpload">确认上传</el-button></div>

</div>

</div>

</div>

</template>

<script>

import request from '@/utils/request'

import { getToken } from '@/utils/auth'

import { importData } from '@/api/purchase/purchase'

import XLSX from '../../../node_modules/xlsx'

export default {

data() {

return {

options: [

{

value: 1,

label: '整包',

},

{

value: 2,

label: '散包',

},

{

value: 3,

label: '单一来源',

},

],

is_type: '',

action: process.env.VUE_APP_BASE_API + '/business/BizMaterialSum/importData',

// 用户导入参数

fileList: [],

// 读取

defaultIndex: 0, // 默认显示第一个工作表

wb: null, // 工作表对象

formData: {},

}

},

created() {},

methods: {

beforeUpload(file) {

//文件类型

const isType = file.type === 'application/vnd.ms-excel'

const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

const fileType = isType || isTypeComputer

if (!fileType) {

this.$message.error('上传文件只能是xls/xlsx格式！')

}

// 文件大小限制为10M

const fileLimit = file.size / 1024 / 1024 < 10

if (!fileLimit) {

this.$message.error('上传文件大小不超过10M！')

}

return fileType && fileLimit

},

// 自定义上传方法，param是默认参数，可以取得file文件信息，具体信息如下图

uploadHttpRequest(param) {

// const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加

// formData.append('file', param.file) //添加文件对象

// formData.append('uploadType', this.is_type) //接口要传的参数

// // 调用接口api

// importData(formData).then((data) => {

//   if (data.code == 200) {

//     this.msgSuccess('成功')

//     param.onSuccess() // 上传成功的文件显示绿色的对勾

//     this.fileList = []

//     this.is_type = ''

//   } else {

//     this.msgError(data.msg)

//   }

// })

},

// 点击上传：手动上传到服务器，此时会触发组件的http-request

submitUpload() {

if (this.is_type && this.fileList) {

// this.$refs.upload.submit()

// console.log(this.formData)

importData(this.formData).then((data) => {

if (data.code == 200) {

this.msgSuccess('成功')

this.fileList = []//清空上传的文件展示列表

this.is_type = ''

this.$refs.upload.clearFiles()//清空已上传的文件列表（该方法不支持在 before-upload 中调用）

} else {

this.msgError(data.msg)

}

})

} else if (this.is_type && this.fileList.length == 0) {

this.msgError('请选择上传文件')

} else if (!this.is_type && this.fileList.length != 0) {

this.msgError('请选择导入模式')

} else if (!this.is_type && this.fileList.length == 0) {

this.msgError('请选择导入模式和上传文件')

}

},

// 移除选择的文件

fileRemove(file, fileList) {

if (fileList.length < 1) {

this.uploadDisabled = true //未选择文件则禁用上传按钮

}

},

// 取消

closeDialog() {

this.$refs.upload.clearFiles() //清除上传文件对象

this.fileList = [] //清空选择的文件列表

this.$emit('close', false)

},

// 文件发生改变

fileChange(file, fileList) {

// if (fileList.length > 0) {

//   this.fileList = [fileList[fileList.length - 1]] // 展示最后一次选择的文件

// }

// console.log(file)

this.formData = {

Name: file.name,

IsType: this.is_type,

}

let files = { 0: file.raw }

this.readExcel(files)

},

// 导入用XLSX读取文档

readExcel(files) {

var that = this

// 如果没有⽂件名

if (files.length <= 0) {

return false

} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {

this.$Message.error('上传格式不正确，请上传xls或者xlsx格式')

return false

}

const fileReader = new FileReader()

fileReader.onload = (ev) => {

try {

const data = ev.target.result

const workbook = XLSX.read(data, {

type: 'binary',

})

// 取第⼀张表

const wsname = workbook.SheetNames[0] //

// ⽣成

// 表格内容

const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])

console.log(ws, 'ws是表格⾥的数据，且是json格式')

let list = ws.map((item) => {

return {

Coding: (item.物料编码)+'',

Name: (item.物料名称)+'',

Specification: (item.规格型号)+'',

Units: (item.计量单位)+'',

AllName: (item.全名)+'',

ApplyNumber: (item.申请数量),

AdjustNumber: (item.调剂后数量),

Remark: (item.备注)+'',

}

})

this.formData.BizMaterialSon = list

// 重写数据

this.$refs.upload.value = ''

} catch (e) {

return false

}

}

fileReader.readAsBinaryString(files[0])

},

},

}

</script>

<style scoped lang="scss">

.title {

text-align: center;

font-size: 70px;

font-weight: 600;

}

.crenter {

width: 450px;

margin: 20px auto;

}

.select {

position: relative;

}

.selectright {

width: 450px;

margin: 20px auto;

}

.selectLeft {

width: 410px;

position: absolute;

left: 54%;

top: 0;

}

.upload-demo {

width: 100%;

}

.upImg {

width: 150px;

// height: 100px;

margin: 10px auto;

}

</style>

<style scoped>

.upload-demo >>> .el-upload-dragger {

border: none;

height: 250px !important;

width: 100%;

}

.box-card >>> .el-upload-dragger {

border: none;

height: 208px !important;

width: 100%;

}

.el-card.is-always-shadow {

-webkit-box-shadow: 0 2px 12px 0 #f0f0f0;

box-shadow: 0px -6px 20px 0 #f0f0f0;

border: none;

}

.box-card >>> .el-upload {

display: block !important;

}

.buttonUp {

display: block;

width: 140px;

padding: 15px;

border-radius: 5px;

margin: 0px auto;

margin-bottom: 10px;

}

.el-upload__tip {

text-align: center;

color: #a7a3a2;

padding: 20px;

box-shadow: 0px 4px 14px 0px #f0f0f0;

margin-top: 0px;

}

</style>

页面图片：

vue+element+xlsx解析上传表格相关推荐

1. vue采用 XLSX文件上传与下载

   vue采用 XLSX文件上传与下载 先安装xlsx npm install xlsx 安装之后直接在该页面script标签里面导入 import * as XLSX from 'xlsx' 注意 此处 ...

2. vue+element实现图片上传及裁剪功能（vue-cropper）

   需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...

3. vue element 单张图片上传，删除，预览

   功能点: 点击'查看图片'按钮,弹窗中会展示图片,第一次看到的图片是从父组件传过来的图片,点击删除按钮,调取删除接口删除图片,在重新上传图片,data中放入列表那一项的数据,上传成功,图片需要回显,此 ...

4. Vue element ui + AmazonS3上传文件功能

   一.在上传之前,需要先获取到AWS的S3服务的Access key ID和Secret access key 二.代码代码: <template><div class="u ...

5. 在线html差错,易查分在线编辑功能:发现错误随时修改，不用再重新上传表格!

   原标题:易查分在线编辑功能:发现错误随时修改,不用再重新上传表格!

6. 文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...

   vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...

7. django 解析上传xls文件

   1.解析上传数据 class DataUploadAPIView(APIView):# authentication_classes = (JSONWebTokenAuthentication, Se ...

8. element upload获取上传成功的图片地址

   关于upload获取上传成功的图片地址 记录一个坑,在项目中用到了element的图片上传, 文档里的室这么写的获取图片的url handleAvatarSuccess(res, file) { th ...

9. Vue自定义组件npm上传私服，且从私服下载使用

   Vue自定义组件npm上传私服,yarn私服下载使用 安装镜像源管理工具nrm 发布自定义组件到公司私服 若未下载nrm源管理工具直接使用npm设置私服地址也可以 以下步骤都是基于npm命令 从私服下 ...

最新文章

1. 将csv文件导入mysql
2. 数学图形(2.23)Cylindric sine wave柱面正弦曲线
3. C#获取和设置环境变量
4. 阿里帝国到底有多庞大
5. java学习（56）：接口之间的继承续
6. php curl 无法获取网页内容,php curl获取网页内容(IPV6下超时)的解决办法
7. SAP PM 第一节 PM后台配置
8. 面经（2022 美团暑期实习 -一面）
9. AssertionError: Attempted unscale_ but _scale is None
10. 电池续航时间增10倍
11. 指法练习软件需求说明书
12. 数据结构之不带头结点单链表和带头结点单链表相关操作实现（C语言）
13. python实验五答案_Python实验五
14. 用inception_v3提取图片的特征向量
15. 如何编辑二维码内容并批量生成
16. Windows 98
17. Scapy畸形报文攻击
18. 苹果营收下降，但仍赚钱！
19. Java入门集合之Set集合(重写equals（）和hashcode（）方法)
20. 《USB开发大全》—USB软硬件开发指南，无可替代的工具书

热门文章

1. 虚拟机MAC地址的分配与修改
2. 【世界杯】free-api-worldcup2022 免费世界杯API
3. 多级分销模块 java_java B2B2C 源码 多级分销Springcloud多租户电子商城系统- 整合企业架构的技术点（二）...
4. SAS 学习笔记（七）— SAS与回归分析
5. 【Java8 新特性 4】java8 optional
6. Kaggle中如何上传文件夹
7. Liked:基于FriendFeed API的信息过滤器
8. 基于sklearn的线性回归模型实现多变量决策树
9. 论文精度笔记(六)：《YOLOv7: Trainable bag-of-freebies sets new state-of-the-art for real-time object detecto》
10. 计算机 职称 博大 技巧,博大考神职称教研中心：如何应对“蜕变的”XP题目？...