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

以你之姓@ 2022-09-16 11:09 124阅读 0赞

前言：

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

  • File 模式：

  • Stream 模式：

目录：

实现效果：

1、界面上

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

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

后端部分：

1、引入插件：这个插件是用来解析excel内容的必备插件

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

3、router文件里面配置路由

4、（非常重要）config/ config.default.js

config.default.js 加入下面的内容，注意白名单，如果你的文件类型默认没有，必须加上，不然会报错，官方解释入口

5、app/ controller/ new/ uploadFile.js

6、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

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

后端部分：

1、引入插件：这个插件是用来解析excel内容的必备插件

  1. cnpm install xlsx --save

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

3、router文件里面配置路由

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

4、（非常重要）config/ config.default.js

config.default.js 加入下面的内容，注意白名单，如果你的文件类型默认没有，必须加上，不然会报错，官方解释入口

  1. //上传文件所需配置
  2.   config.multipart = {
  3.     mode: 'file',//启用 file 模式
  4.     fileSize: 1048576000,
  5.     whitelist: ['.xlsx'] //白名单，把你的文件类型加上，不然会报错
  6.   }
  8. 官方默认就有的格式
  9. // images
  10. '.jpg', '.jpeg', // image/jpeg
  11. '.png', // image/png, image/x-png
  12. '.gif', // image/gif
  13. '.bmp', // image/bmp
  14. '.wbmp', // image/vnd.wap.wbmp
  15. '.webp',
  16. '.tif',
  17. '.psd',
  18. // text
  19. '.svg',
  20. '.js', '.jsx',
  21. '.json',
  22. '.css', '.less',
  23. '.html', '.htm',
  24. '.xml',
  25. // tar
  26. '.zip',
  27. '.gz', '.tgz', '.gzip',
  28. // video
  29. '.mp3',
  30. '.mp4',
  31. '.avi',

" class="reference-link">watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16 1

5、app/ controller/ new/ uploadFile.js

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_6_color_FFFFFF_t_70_g_se_x_16

6、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.    * 这里使用的是file
  11.    */
  12.   async uploadFiles_file(){
  13.     const {ctx} = this;
  14.     const file = ctx.request.files[0]; //获取上传文件，config没有配置，这里file拿不到
  15.     if (!file) return ctx.throw(404);
  16.     const filename = ctx.request.body.name?ctx.request.body.name:file.filename //文件名称,如果前端没传就直接用文件的
  17.     const distPath = path.join('', 'app/public/upload/excel');
  18.     const stat = fs.statSync(distPath);
  19.     if (!stat.isDirectory()) {
  20.       fs.mkdirSync(distPath);
  21.     }
  22.     const targetPath = path.join('', 'app/public/upload/excel', filename);//目标文件地址
  23.     //将上传的文件保存到本地，如果本地有就覆盖
  24.     fs.readFile(file.filepath, function (err, data) {  // 异步读取文件内容
  25.       fs.writeFile(targetPath, data, function (err) { // des_file是文件名，data，文件数据，异步写入到文件
  26.         if( err ){
  27.           console.log( '文件保存到本地失败，原因：' );
  28.           console.log( err );
  29.         }else{
  30.           console.log('文件保存到本地成功');
  31.           // 读取内容
  32.           const workbook = xlsx.readFile(targetPath);
  33.           const sheetNames = workbook.SheetNames; //获取表名
  34.           const sheet = workbook.Sheets[sheetNames[0]]; //通过表名得到表对象
  35.           // console.log(sheet);
  36.           // console.log('111111111');thead的内容通过   打印sheet  得到
  37.           const thead = [sheet.A1.v, sheet.B1.v, sheet.C1.v, sheet.D1.v, sheet.E1.v];
  38.           const exceldata = xlsx.utils.sheet_to_json(sheet); //通过工具将表对象的数据读出来并转成json
  39.           // console.log(thead);//[ '姓名', '年龄', '地址', '邮箱', '手机号' ]
  40.           // console.log(data);//[{'姓名': '张浩','年龄': 12,'地址': '幸福1','邮箱': '1234@.qq.com','手机号': '12345678900'}]
  41.           if(exceldata.length>0){
  42.             //将excel数据增添到库里
  43.             ctx.service.common.addSimCard(exceldata);
  44.           }
  45.         }
  46.       });
  47.     })
  48.     ctx.body = {
  49.       code:200,
  50.       masg:'success',
  51.       data:'上传成功'
  52.     };
  54.   }
  57. }
  59. module.exports = uploadFileController;

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

  1. const Service = require('egg').Service;
  3. class CommonService extends Service {
  4.   /**
  5.    * 上次excel添加到mysql数据库
  6.    * @param {Array} headers excel标题栏
  7.    * @param {Array} result excel内容
  8.    */
  9.   async addSimCard(result) {
  10.       const values = []; //[ [1,'张三','13519105845',...] ,[],[]...    ]
  11.       result.forEach(item=> {
  12.         let _arr = [];
  13.         _arr[0] = parseInt(Math.random()*100000)
  14.         _arr[1] = item['姓名']
  15.         _arr[2] = item['手机号']
  16.         _arr[3] = item['地址']
  17.         _arr[4] = item['年龄']
  18.         _arr[5] = item['邮箱']
  20.         values.push(_arr);
  21.       });
  23.       // 重点sql语句
  24.       const addSql = 'INSERT INTO user (id,name,phone,address,age,email) VALUES ?';
  25.       const _result = await this.app.mysql.query(addSql, [values]);
  26.       console.log('上传成功')
  27.     }
  29. }
  30. 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 条评论，124人围观）

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

相关阅读