前言：

       在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、界面上

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

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

后端部分：

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

cnpm install xlsx --save

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

3、router文件里面配置路由

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

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

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

//上传文件所需配置
  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',

 5、app/ controller/ new/ uploadFile.js 

6、uploadFile.js

const Controller = require('egg').Controller;
const xlsx = require('xlsx')

const fs = require('fs')
const path = require('path');
class uploadFileController extends Controller {
    
  async uploadFiles_file(){
    const {ctx} = this;
    const file = ctx.request.files[0]; //获取上传文件，config没有配置，这里file拿不到
    if (!file) return ctx.throw(404);
    const filename = ctx.request.body.name?ctx.request.body.name:file.filename //文件名称,如果前端没传就直接用文件的
    const distPath = path.join('', 'app/public/upload/excel');
    const stat = fs.statSync(distPath);
    if (!stat.isDirectory()) {
      fs.mkdirSync(distPath);
    }
    const targetPath = path.join('', 'app/public/upload/excel', filename);//目标文件地址
    //将上传的文件保存到本地，如果本地有就覆盖
    fs.readFile(file.filepath, function (err, data) {  // 异步读取文件内容
      fs.writeFile(targetPath, data, function (err) { // des_file是文件名，data，文件数据，异步写入到文件
        if( err ){
          console.log( '文件保存到本地失败，原因：' );
          console.log( err );
        }else{
          console.log('文件保存到本地成功');
          // 读取内容
          const workbook = xlsx.readFile(targetPath);
          const sheetNames = workbook.SheetNames; //获取表名
          const sheet = workbook.Sheets[sheetNames[0]]; //通过表名得到表对象
          // console.log(sheet);
          // console.log('111111111');thead的内容通过   打印sheet  得到
          const thead = [sheet.A1.v, sheet.B1.v, sheet.C1.v, sheet.D1.v, sheet.E1.v];
          const exceldata = xlsx.utils.sheet_to_json(sheet); //通过工具将表对象的数据读出来并转成json
          // console.log(thead);//[ '姓名', '年龄', '地址', '邮箱', '手机号' ]
          // console.log(data);//[{'姓名': '张浩','年龄': 12,'地址': '幸福1','邮箱': '1234@.qq.com','手机号': '12345678900'}]
          if(exceldata.length>0){
            //将excel数据增添到库里
            ctx.service.common.addSimCard(exceldata);
          }
        }
      });
    })
    ctx.body = {
      code:200,
      masg:'success',
      data:'上传成功'
    };

  }


}

module.exports = uploadFileController;

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

const Service = require('egg').Service;

class CommonService extends Service {
  
  async addSimCard(result) {
      const values = []; //[ [1,'张三','13519105845',...] ,[],[]...    ]
      result.forEach(item=> {
        let _arr = [];
        _arr[0] = parseInt(Math.random()*100000)
        _arr[1] = item['姓名']
        _arr[2] = item['手机号']
        _arr[3] = item['地址']
        _arr[4] = item['年龄']
        _arr[5] = item['邮箱']

        values.push(_arr);
      });
        
      // 重点sql语句
      const addSql = 'INSERT INTO user (id,name,phone,address,age,email) VALUES ?';
      const _result = await this.app.mysql.query(addSql, [values]);
      console.log('上传成功')
    }
 
}
module.exports = CommonService;

前端部分 vue+element：

1、封装文件：   uploadAndDown.vue

2、调用封装文件

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);
      }

到此结束！