egg(十一):上传excel文件并解析内容，存到mysql数据库，并保存到本地，vue+egg实现前后端

妖狐艹你老母 2022-09-16 11:09 668阅读 0赞

前言：

在egg中的上传是有两种方法来实现：官方入口

  • File 模式：

  • Stream 模式：

目录：

实现效果：

1、界面上

2、代码中：上传以后，mysql中新增数据，并且，public/ upload/ excel 里面保存我们上传的文件

这里来讲一讲他的Stream 模式模式的用法：

后端部分：

1、引入插件：

2、准备一个excel文件，如果是按照我教程的话，第九步就是下载功能的实现，入口点我

3、router文件里面配置路由

4、app/ controller/ new/ uploadFile.js

5、uploadFile.js

7、serve/ common.js ,这里放给mysql库里存数据的相关代码

前端部分 vue+element：

1、封装文件： uploadAndDown.vue

2、调用封装文件

3、上传和下载的事件

到此结束！

实现效果：

1、界面上

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16

2、代码中：上传以后，mysql中新增数据，并且，public/ upload/ excel 里面保存我们上传的文件

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_8_color_FFFFFF_t_70_g_se_x_16

这里来讲一讲他的Stream 模式模式的用法：

后端部分：

1、引入插件：

  1. cnpm install xlsx await-stream-ready stream-wormhole --save

2、准备一个excel文件，如果是按照我教程的话，第九步就是下载功能的实现，入口点我

3、router文件里面配置路由

  1. module.exports = app => {
  2.     //上传-批量用户数据-用的file
  3.     app.post('/uploadUserList', controller.new.uploadFile.uploadFiles_stream);
  4. }

4、app/ controller/ new/ uploadFile.js

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_6_color_FFFFFF_t_70_g_se_x_16

5、uploadFile.js

  1. const Controller = require('egg').Controller;
  2. const xlsx = require('xlsx')
  4. const fs = require('fs')
  5. const path = require('path');
  6. class uploadFileController extends Controller {
  7.     /**
  8.    * @上传文件-将excel文件数据输入到user表
  9.    * 两种类型，file和stream
  10.    * 这里使用的是stream
  11.    */
  12.   async uploadFiles_stream(){
  13.     const {ctx} = this;
  14.     this.uploadFileStream()
  15.     this.ctx.body = {
  16.       code:200,
  17.       masg:'success',
  18.       data:'上传成功'
  19.     };
  20.   }
  21.   //stream 获取上传文件，然后解析存库
  22.   async uploadFileStream(){
  23.     const {ctx} = this;
  24.     const stream = await ctx.getFileStream() ;
  25.     // 存储获取到的数据
  26.     let exceldata = [];
  27.     stream.on('data', function(chunk) {
  28.       // 读取内容
  29.       const workbook = xlsx.read(chunk, { type: 'buffer' });
  30.       // 遍历每张工作表进行读取（这里默认只读取第一张表）
  31.       for (const sheet in workbook.Sheets) {
  32.         if (workbook.Sheets.hasOwnProperty(sheet)) {
  33.           // 利用 sheet_to_json 方法将 excel 转成 json 数据
  34.           exceldata = exceldata.concat(xlsx.utils.sheet_to_json(workbook.Sheets[sheet]));
  35.           // break; // 如果只取第一张表，就取消注释这行
  36.         }
  37.       }
  38.       console.log(exceldata);  // 打印解析出来的Excel 内容
  40.       if(exceldata.length>0){
  41.         //将excel数据增添到库里
  42.         ctx.service.common.addSimCard(exceldata);
  43.       }
  44.     })
  45.     //将上传的文件保存到本地
  46.     ctx.service.common.saveStreamFile(stream)
  48.   }
  51. }
  53. module.exports = uploadFileController;

7、serve/ common.js ,这里放给mysql库里存数据的相关代码

  1. const Service = require('egg').Service;
  3. const fs = require('fs')
  4. const path = require('path');
  5. // 异步二进制 写入流
  6. const awaitWriteStream = require('await-stream-ready').write;
  7. // 管道读入一个虫洞。
  8. const sendToWormhole = require('stream-wormhole');
  10. class CommonService extends Service {
  11.   /**
  12.    * 上次excel添加到mysql数据库
  13.    * @param {Array} headers excel标题栏
  14.    * @param {Array} result excel内容
  15.    */
  16.   async addSimCard(result) {
  17.       const values = []; //[ [1,'张三','13519105845',...] ,[],[]...    ]
  18.       result.forEach(item=> {
  19.         let _arr = [];
  20.         _arr[0] = parseInt(Math.random()*100000)
  21.         _arr[1] = item['姓名']
  22.         _arr[2] = item['手机号']
  23.         _arr[3] = item['地址']
  24.         _arr[4] = item['年龄']
  25.         _arr[5] = item['邮箱']
  27.         values.push(_arr);
  28.       });
  30.       // 重点sql语句
  31.       const addSql = 'INSERT INTO user (id,name,phone,address,age,email) VALUES ?';
  32.       const _result = await this.app.mysql.query(addSql, [values]);
  33.       console.log('上传成功')
  34.     }
  35.     /**
  36.    * 将上传的文件保存到本地- stream类型
  37.    * @param  stream excel标题栏
  38.    */
  39.   async saveStreamFile(stream){
  40.     //新建一个文件名，如果本地有就覆盖掉
  41.     const filename = stream.filename.split('.')[0] + path
  42.       .extname(stream.filename)
  43.       .toLocaleLowerCase();
  44.     //文件生成绝对路径
  45.     const target = path.join('', 'app/public/upload/excel', filename);
  46.     //生成一个文件写入 文件流
  47.     const writeStream = fs.createWriteStream(target);
  48.     try {
  49.       //把文件流 写入
  50.       await awaitWriteStream(stream.pipe(writeStream));
  51.     } catch (err) {
  52.       //出错则关闭管道
  53.       await sendToWormhole(stream);
  54.       throw err;
  55.     }
  56.   }
  61. }
  62. module.exports = CommonService;

前端部分 vue+element：

1、封装文件： uploadAndDown.vue

  1. <template>
  2.   <el-upload
  3.     v-if="Refresh"
  4.     class="upload-demo"
  5.     ref="upload"
  6.     :action="action"
  7.     :headers="headers"
  8.     :multiple="multiple"
  9.     :data="data"
  10.     :name="name"
  11.     :with-credentials="cookieOK"
  12.     :show-file-list="showFileList"
  13.     :drag="drag"
  14.     :accept="accept"
  15.     :list-type="listType"
  16.     :auto-upload="autoUpload"
  17.     :file-list="fileList"
  18.     :disabled="is_disabled"
  20.     :on-preview="handlePreview"
  21.     :on-remove="handleRemove"
  22.     :on-success="handleSuccess"
  23.     :on-error="handleError"
  24.     :on-progress="handleProgress"
  25.     :on-exceed="handleExceed"
  26.     :on-change="onChange"
  28.     :before-upload="beforeUpload"
  29.     :before-remove="beforeRemove"
  30.     :http-request="httpRequest"
  31.   >
  32.     <el-button slot="trigger" type="primary" icon="el-icon-upload2">选取文件</el-button>
  33.     <el-button style="margin-left: 10px;"
  34.                type="success"
  35.                @click="submitUploadSD"
  36.                :disabled="fileList.length==0"
  37.                :title="fileList.length==0?'请先选中文件':''"
  38.                icon="el-icon-upload">开始上传</el-button>
  39.     <el-button type="danger"
  40.                v-if="fileList.length>0"
  41.                icon="el-icon-delete"
  42.                @click.stop="clearFiles"
  43.                title="清空选中文件"
  44.                circle></el-button>
  45.     <el-button style="margin-left: 10px;"
  46.                type="primary"
  47.                @click.stop="downFile"
  48.                icon="el-icon-download">下载模板</el-button>
  50.     <!--提示信息-->
  51.     <div slot="tip" class="el-upload__tip" v-if="tip_text!=''">{
  52.    {tip_text}}</div>
  53.   </el-upload>
  55. </template>
  57. <script>
  58.   //element的上传文件组件
  59.   export default {
  60.     props:{
  61.       /**
  62.        * 自动上传参数
  63.        * */
  64.       autoUpload:{ // 是否需要选取完自动上传功能
  65.         type: Boolean,
  66.         default: false
  67.       },
  68.       action:{//上传的地址
  69.         type: String,
  70.         default: ''
  71.       },
  72.       headers: {//设置上传的请求头部
  73.         type:Object,
  74.         default: () => {
  75.           return {}
  76.         }
  77.       },
  78.       data: {//上传时额外带的参数
  79.         type:Object,
  80.         default: () => {
  81.           return {}
  82.         }
  83.       },
  84.       name:{//上传的文件字段名
  85.         type: String,
  86.         default: 'file'
  87.       },
  88.       cookieOK:{//支持发送 cookie 凭证信息
  89.         type: Boolean,
  90.         default: true
  91.       },
  92.       /**
  93.        * 公共参数
  94.        * */
  95.       showFileList:{//是否显示已上传文件列表
  96.         type: Boolean,
  97.         default: true
  98.       },
  99.       drag:{//是否启用拖拽上传
  100.         type: Boolean,
  101.         default: false
  102.       },
  103.       accept:{//接受文件类型-图片上传类型-不同的格式之间以逗号隔开
  104.         type: String,
  105.         // default:'.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  106.         default: '.xlsx,.xls'
  107.       },
  108.       listType:{ // 文件列表的类型 - text/picture/picture-card
  109.         type: String,
  110.         default: 'text'
  111.       },
  112.       fileList:{//已上传的文件列表,
  113.         type:Array,
  114.         default: () => {
  115.           // { 默认格式
  116.           //   name: 'food.jpeg',
  117.           //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  118.           // }
  119.           return []
  120.         }
  121.       },
  122.       is_disabled:{//是否禁止，true是禁止，false不禁止
  123.         type: Boolean,
  124.         default: false
  125.       },
  126.       multiple:{//是否可以多选
  127.         type: Boolean,
  128.         default: true
  129.       },
  130.       limit:{//最大允许上传个数
  131.         type: Number,
  132.         default: 30
  133.       },
  135.       tip_text:{//提示信息
  136.         type: String,
  137.         default: ''
  138.       },
  139.       /**
  140.        * 手动上传参数
  141.        * */
  142.       needFromUpload:{ // form表单,将上传的file文件通过 formUpload  方法发送出去
  143.         type: Boolean,
  144.         default: false
  145.       },
  148.     },
  149.     watch: {},
  150.     data() {
  151.       return {
  152.         Refresh:true,//强制刷新
  153.       }
  154.     },
  155.     created() {
  156.     },
  157.     mounted() {
  158.     },
  159.     methods: {
  160.       /**
  161.        * 上传-默认事件
  162.        * */
  163.       //文件列表移除文件时的钩子
  164.       handleRemove(file, fileList) {
  165.         console.log('当前移除的是'+file);
  166.       },
  167.       //点击文件列表中已上传的文件时的钩子
  168.       handlePreview(file) {
  169.         console.log('当前点击的是'+file);
  170.       },
  171.       //文件上传成功时的钩子
  172.       handleSuccess(response, file, fileList) {
  173.         console.log('文件上传成功');
  174.       },
  175.       //文件上传失败时的钩子
  176.       handleError(err, file, fileList) {
  177.         console.log('文件上传失败');
  178.       },
  179.       //文件上传时的钩子
  180.       handleProgress(event, file, fileList) {
  181.         console.log(file);
  182.       },
  183.       //文件超出个数限制时的钩子
  184.       handleExceed(files, fileList) {
  185.         console.log('文件超出个数限制');
  186.       },
  187.       //覆盖默认的上传行为，可以自定义上传的实现
  188.       httpRequest(){
  190.       },
  191.       //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
  192.       beforeRemove(file, fileList) {
  193.         console.log('当前删除的文件'+file);
  194.         this.fileList.forEach((item,index)=>{
  195.           if(item == file){
  196.             this.fileList.splice(index,1)
  197.           }
  198.         })
  199.       },
  201.       /**
  202.        * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
  203.        */
  204.       onChange(file, fileList) {
  205.         this.fileList = fileList;
  206.         console.log('当前的选中文件：');
  207.         console.log(fileList);
  208.       },
  209.       /**
  210.        * 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
  211.        */
  212.       beforeUpload(file) {
  213.         console.log(file);
  214.       },
  215.       /**
  216.        * 上传-自定义事件
  217.        * */
  218.       submitUpload() {
  219.         this.$refs.upload.submit();
  220.       },
  221.       //清空已上传的文件列表（该方法不支持在 before-upload 中调用）
  222.       clearFiles(){
  223.         this.$refs.upload.clearFiles();
  224.         this.fileList = [];
  225.       },
  226.       //取消上传某个文件
  227.       abortFiles(file){
  228.         this.$refs.upload.abort(file);
  229.       },
  233.       /**
  234.        * 手动上传点击确认
  235.        * */
  236.       submitUploadSD(){
  237.         let arr = this.fileList;
  238.         let str = {
  239.           fileList:arr
  240.         }
  241.         this.$emit('uploadFile',str);
  242.       },
  243.       /**
  244.        * 下载模板点击
  245.        * */
  246.       downFile(){
  247.         this.$emit('downFile');
  248.       },
  249.       /**
  250.        * 手动刷新上传组件
  251.        * */
  252.       RefreshUpload(){
  253.         let arr = this.fileList;
  254.         this.Refresh = false;
  255.         this.$nextTick(()=>{
  256.           this.Refresh = true;
  257.         })
  258.       },
  260.     },
  261.     components: {},
  262.     beforeDestroy() {
  263.     }
  265.   }
  266. </script>
  268. <style lang='scss' scoped>
  270. </style>

2、调用封装文件

  1. <upload-and-down 
  2.     class="uploadAndDown" 
  3.     @uploadFile="uploadFile" 
  4.     @downFile="downFile">
  5. </upload-and-down>

3、上传和下载的事件

  1. /**
  2.        * 上传
  3.        * */
  4.       uploadFile(str){
  5.         let fileList = str.fileList;
  6.         let formData = new FormData
  7.         fileList.forEach(item=>{
  8.           formData.append('file',item.raw)
  9.         })
  10.         this.$axios({
  11.           method:'post',
  12.           url:'http://localhost:7001/uploadUserList',
  13.           data:formData,
  14.           headers:{
  15.             'Content-Type': 'application/x-www-form-urlencoded'
  16.           }
  17.         }).then(res => {
  18.           this.$message.success('上传成功')
  19.         })
  20.       },
  21.       //下载事件
  22.       downFile(){
  23.         console.log('点击下载按钮');
  24.         // 创建隐藏的可下载链接
  25.         var eleLink = document.createElement('a');
  26.         eleLink.style.display = 'none';
  27.         eleLink.href = 'http://localhost:7001/toexecl';
  28.         // 触发点击
  29.         document.body.appendChild(eleLink);
  30.         eleLink.click();
  31.         // 然后移除
  32.         document.body.removeChild(eleLink);
  33.       }

到此结束！

发表评论

表情：
评论列表 （有 0 条评论，668人围观）

还没有评论，来说两句吧...

相关阅读