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

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

### 前言： ###

### 在egg中的上传是有两种方法来实现：[官方入口][Link 1] ###

*  ### 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内容的必备插件 ###

cnpm install xlsx --save

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

### 3、router文件里面配置路由 ###

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

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

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

//上传文件所需配置
      config.multipart = {
        mode: 'file',//启用 file 模式
        fileSize: 1048576000,
        whitelist: ['.xlsx'] //白名单，把你的文件类型加上，不然会报错
      }

官方默认就有的格式
    // images
    '.jpg', '.jpeg', // image/jpeg
    '.png', // image/png, image/x-png
    '.gif', // image/gif
    '.bmp', // image/bmp
    '.wbmp', // image/vnd.wap.wbmp
    '.webp',
    '.tif',
    '.psd',
    // text
    '.svg',
    '.js', '.jsx',
    '.json',
    '.css', '.less',
    '.html', '.htm',
    '.xml',
    // tar
    '.zip',
    '.gz', '.tgz', '.gzip',
    // video
    '.mp3',
    '.mp4',
    '.avi',

### ![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 ###

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

## 前端部分 vue+element： ##

### 1、封装文件： uploadAndDown.vue ###

<template>
      <el-upload
        v-if="Refresh"
        class="upload-demo"
        ref="upload"
        :action="action"
        :headers="headers"
        :multiple="multiple"
        :data="data"
        :name="name"
        :with-credentials="cookieOK"
        :show-file-list="showFileList"
        :drag="drag"
        :accept="accept"
        :list-type="listType"
        :auto-upload="autoUpload"
        :file-list="fileList"
        :disabled="is_disabled"
    
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-progress="handleProgress"
        :on-exceed="handleExceed"
        :on-change="onChange"
    
        :before-upload="beforeUpload"
        :before-remove="beforeRemove"
        :http-request="httpRequest"
      >
        <el-button slot="trigger" type="primary" icon="el-icon-upload2">选取文件</el-button>
        <el-button style="margin-left: 10px;"
                   type="success"
                   @click="submitUploadSD"
                   :disabled="fileList.length==0"
                   :title="fileList.length==0?'请先选中文件':''"
                   icon="el-icon-upload">开始上传</el-button>
        <el-button type="danger"
                   v-if="fileList.length>0"
                   icon="el-icon-delete"
                   @click.stop="clearFiles"
                   title="清空选中文件"
                   circle></el-button>
        <el-button style="margin-left: 10px;"
                   type="primary"
                   @click.stop="downFile"
                   icon="el-icon-download">下载模板</el-button>
    
        
        <div slot="tip" class="el-upload__tip" v-if="tip_text!=''">{
       {tip_text}}</div>
      </el-upload>
    
    </template>
    
    <script>
      //element的上传文件组件
      export default {
        props:{
          /**
           * 自动上传参数
           * */
          autoUpload:{ // 是否需要选取完自动上传功能
            type: Boolean,
            default: false
          },
          action:{//上传的地址
            type: String,
            default: ''
          },
          headers: {//设置上传的请求头部
            type:Object,
            default: () => {
              return {}
            }
          },
          data: {//上传时额外带的参数
            type:Object,
            default: () => {
              return {}
            }
          },
          name:{//上传的文件字段名
            type: String,
            default: 'file'
          },
          cookieOK:{//支持发送 cookie 凭证信息
            type: Boolean,
            default: true
          },
          /**
           * 公共参数
           * */
          showFileList:{//是否显示已上传文件列表
            type: Boolean,
            default: true
          },
          drag:{//是否启用拖拽上传
            type: Boolean,
            default: false
          },
          accept:{//接受文件类型-图片上传类型-不同的格式之间以逗号隔开
            type: String,
            // default:'.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            default: '.xlsx,.xls'
          },
          listType:{ // 文件列表的类型 - text/picture/picture-card
            type: String,
            default: 'text'
          },
          fileList:{//已上传的文件列表,
            type:Array,
            default: () => {
              // { 默认格式
              //   name: 'food.jpeg',
              //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
              // }
              return []
            }
          },
          is_disabled:{//是否禁止，true是禁止，false不禁止
            type: Boolean,
            default: false
          },
          multiple:{//是否可以多选
            type: Boolean,
            default: true
          },
          limit:{//最大允许上传个数
            type: Number,
            default: 30
          },
    
          tip_text:{//提示信息
            type: String,
            default: ''
          },
          /**
           * 手动上传参数
           * */
          needFromUpload:{ // form表单,将上传的file文件通过 formUpload  方法发送出去
            type: Boolean,
            default: false
          },
    
    
        },
        watch: {},
        data() {
          return {
            Refresh:true,//强制刷新
          }
        },
        created() {
        },
        mounted() {
        },
        methods: {
          /**
           * 上传-默认事件
           * */
          //文件列表移除文件时的钩子
          handleRemove(file, fileList) {
            console.log('当前移除的是'+file);
          },
          //点击文件列表中已上传的文件时的钩子
          handlePreview(file) {
            console.log('当前点击的是'+file);
          },
          //文件上传成功时的钩子
          handleSuccess(response, file, fileList) {
            console.log('文件上传成功');
          },
          //文件上传失败时的钩子
          handleError(err, file, fileList) {
            console.log('文件上传失败');
          },
          //文件上传时的钩子
          handleProgress(event, file, fileList) {
            console.log(file);
          },
          //文件超出个数限制时的钩子
          handleExceed(files, fileList) {
            console.log('文件超出个数限制');
          },
          //覆盖默认的上传行为，可以自定义上传的实现
          httpRequest(){
    
          },
          //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
          beforeRemove(file, fileList) {
            console.log('当前删除的文件'+file);
            this.fileList.forEach((item,index)=>{
              if(item == file){
                this.fileList.splice(index,1)
              }
            })
          },
    
          /**
           * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
           */
          onChange(file, fileList) {
            this.fileList = fileList;
            console.log('当前的选中文件：');
            console.log(fileList);
          },
          /**
           * 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
           */
          beforeUpload(file) {
            console.log(file);
          },
          /**
           * 上传-自定义事件
           * */
          submitUpload() {
            this.$refs.upload.submit();
          },
          //清空已上传的文件列表（该方法不支持在 before-upload 中调用）
          clearFiles(){
            this.$refs.upload.clearFiles();
            this.fileList = [];
          },
          //取消上传某个文件
          abortFiles(file){
            this.$refs.upload.abort(file);
          },
    
    
    
          /**
           * 手动上传点击确认
           * */
          submitUploadSD(){
            let arr = this.fileList;
            let str = {
              fileList:arr
            }
            this.$emit('uploadFile',str);
          },
          /**
           * 下载模板点击
           * */
          downFile(){
            this.$emit('downFile');
          },
          /**
           * 手动刷新上传组件
           * */
          RefreshUpload(){
            let arr = this.fileList;
            this.Refresh = false;
            this.$nextTick(()=>{
              this.Refresh = true;
            })
          },
    
        },
        components: {},
        beforeDestroy() {
        }
    
      }
    </script>
    
    <style lang='scss' scoped>
    
    </style>

### 2、调用封装文件 ###

<upload-and-down 
        class="uploadAndDown" 
        @uploadFile="uploadFile" 
        @downFile="downFile">
    </upload-and-down>

### 3、上传和下载的事件 ###

/**
           * 上传
           * */
          uploadFile(str){
            let fileList = str.fileList;
            let formData = new FormData
            fileList.forEach(item=>{
              formData.append('file',item.raw)
            })
            this.$axios({
              method:'post',
              url:'http://localhost:7001/uploadUserList',
              data:formData,
              headers:{
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then(res => {
              this.$message.success('上传成功')
            })
          },
          //下载事件
          downFile(){
            console.log('点击下载按钮');
            // 创建隐藏的可下载链接
            var eleLink = document.createElement('a');
            eleLink.style.display = 'none';
            eleLink.href = 'http://localhost:7001/toexecl';
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          }

### 到此结束！ ###

[Link 1]: https://eggjs.org/zh-cn/basics/controller.html#%E8%8E%B7%E5%8F%96%E4%B8%8A%E4%BC%A0%E7%9A%84%E6%96%87%E4%BB%B6
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/40c9bc960c454fc9ab1510906c713a27.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_8_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1e145cf978b448bca29a49eacac9f5c4.png
[Link 2]: https://blog.csdn.net/weixin_44727080/article/details/120749625
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/e83357fd061f49f0a94305df7aabb575.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_6_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/9419e14977aa4744a24859058923f671.png