eggjs+mysql实现图片上传

目录

1. egg.js 配合 jwt 进行鉴权
2. egg.js 配置 mysql 以及简单登录实现
3. eggjs+mysql实现图片上传
4. eggjs 实现增删改查
5. eggjs 搭配 vue+axios 实现登录和获取用户信息

开发

eggjs 实现图片上传

实现思路

将图片上传到服务器某个文件夹，并且将数据存放数据库

数据库建表，表结构为

打开 config -> config.defalut.js ，先引入 const path = require('path'); , 再加入

//文件存放路径和文件白名单
 config.uploadDir = 'app/public/img';
  config.multipart = {
    mode: 'file',
    fileSize: 1048576000,
    whitelist: [ '.txt', '.png', '.jpg' ],
  };
// 文件静态路径
config.static = {
    prefix: '/app/public', //访问前缀
    dir: path.join(appInfo.baseDir, 'app/public'), 
    dynamic: true, 
    preload: false,
    maxAge: 31536000, 
    buffer: true, 
 };

新建 service -> upload.js,加入

'use strict';
const Service = require('egg').Service;
class UploadService extends Service {
  // 获取图片
  async query(params) {
    const { app } = this;
    try {
      const result = await app.mysql.get('img', params);
      return result;
    } catch (error) {
      console.log(error);
      return null;
    }
  }
  // 增加图片
  async add(params) {
    const { app } = this;
    try {
      const result = await app.mysql.insert('img', params);
      return result.insertId;
    } catch (error) {
      return null;
    }
  }
}
module.exports = UploadService;

新建 controller -> upload.js,加入

'use strict';

const fs = require('fs');
const moment = require('moment');
const mkdirp = require('mkdirp');
const path = require('path');
const api = require('../utils/utils').api;
const Controller = require('egg').Controller;

class UploadController extends Controller {
  async upload() {
    const { ctx } = this;
    // 需要前往 config/config.default.js 设置 config.multipart 的 mode 属性为 file
    const file = ctx.request.files[0];
    // 声明存放资源的路径
    let uploadDir = '';
    let id = '';
    try {
      // ctx.request.files[0] 表示获取第一个文件，若前端上传多个文件则可以遍历这个数组对象
      const f = fs.readFileSync(file.filepath);
      // 1.获取当前日期
      const day = moment(new Date()).format('YYYYMMDD');
      // 2.创建图片保存的路径
      const dir = path.join(this.config.uploadDir, day);
      const date = Date.now(); // 毫秒数
      await mkdirp(dir); // 不存在就创建目录
      // 返回图片保存的路径
      uploadDir = path.join(dir, date + path.extname(file.filename));
      // decodeURI是为了中文乱码
      id = await ctx.service.upload.add({ img_url: api + uploadDir, filename: decodeURI(file.filename) });
      // 写入文件夹
      fs.writeFileSync(uploadDir, f);
    } catch (e) {
      console.log('error', e);
      // 清除临时文件
      ctx.cleanupRequestFiles();
    }

    ctx.body = {
      code: 200,
      msg: '上传成功',
      data: uploadDir.replace(/app/g, ''),
      id,
    };
  }
}

module.exports = UploadController;

最后在 router.js 中加入

 router.post('/api/upload/upload', _jwt, controller.upload.upload); // 修改用户个性签名

最后跑一跑是否成功

看看数据库

中文乱码问题

我的解决方法是，在上传图片的时候使用 encodeURI 编码下，然后 eggjs 使用 decodeURI 解码