Egg(五):Egg+Mysql实现图片上传

前言

Egg实现图片上传

一、数据库建表

1.数据库建表，表结构为

CREATE TABLE `img` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `imgurl` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT '图片url',
  `filename` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL COMMENT '图片名称',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=210 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

二、egg实现图片上传

1.安装依赖

npm install -g mkdirp

Moment.js 是一个轻量级的 JavaScript 时间库，它方便了日常开发中对时间的操作，提高了开发效率。

npm install moment

2.打开 config -> config.defalut.js

//先引入path
const path = require('path');
//文件存放路径和文件白名单
  config.uploadDir = 'app/public/upload'
  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, 
 };

3.新建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 = '';
    let api = '';
    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));
       api="http://localhost:7001/"
      // decodeURI是为了中文乱码
      id = await ctx.service.upload.add({ img_url: api + uploadDir, filename: file.filename });
      console.log( id);
      // 写入文件夹
      fs.writeFileSync(uploadDir, f);
    } catch (e) {
      console.log('error', e);
      // 清除临时文件
      ctx.cleanupRequestFiles();
    }

    ctx.body = {
      status: 200,
      msg: '上传成功',
      data: api + uploadDir,
      id,
    };
  }
}

module.exports = UploadController;

4.新建 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;

5.最后在 router.js 中加入

 router.post('/api/upload/upload',controller.upload.upload; // 上传图片

6.发送接口请求数据

在使用egg的上传图片功能的时候出现的这个报错：Cannot read properties of undefined (reading ‘0‘) 请查看这篇文章：