vue上传excel并展示_vue实战(15)——基于Element上传Excel读取内容

image.png

1、应用场景

大多数管理后台很多情况会有批量上传数据的业务，用的最多的要数Excel上传，根据不同的业务场景有两种上传方式：

对于数据量很大的情况，需要后端提供上传的接口，像上传图片视频一样，数据解析和提取都由后端来处理，表格内容不太多的情况下单次10000条以上(单次上传量还要根据自己的项目情况而定)一般会选择这种方式，数据量太大浏览器读取的速度远远小于服务端读取

对于数据量不太大的情况，一般单次上传10000条以内的，可以通过前端读取传给后端来处理，这种适用于大部分场景，而前端只需要封装个组件即可，每次按需求读取或处理好数据返给后端

2、封装组件

读取Excel同样需要依赖xlsx这个插件，之前文章有Excel导出的文章，这里就不多解释，原理都差不多，通过解析读取Excel内容然后输出

accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

{ {title}}

import XLSX from 'xlsx'

export default {

name: "importExcelCommon",

props: {

title: {

type: String,

default: '导入表格'