js将图片上传服务器文件夹下,Egg.js 实现向服务器上传图片

1.安装时间处理 及 压缩 模块

yarn add silly-datetime pump

2.文件保存路径

config/config.default.js

config.uploadDir = 'app/public/avatar/upload';

3.创建tools service

app/service/tools.js

'use strict';

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

const path = require("path");

const sd = require('silly-datetime');

const mkdirp = require('mkdirp');

class ToolsService extends Service {

/**

* 获取文件上传目录

* @param {*} filename

*/

async getUploadFile(filename) {

// 1.获取当前日期

let day = sd.format(new Date(), 'YYYYMMDD');

// 2.创建图片保存的路径

let dir = path.join(this.config.uploadDir, day);

await mkdirp(dir); // 不存在就创建目录

let date = Date.now(); // 毫秒数

// 返回图片保存的路径

let uploadDir = path.join(dir, date + path.extname(filename));

// app\public\avatar\upload\20200312\1536895331666.png

return {

uploadDir,

saveDir: this.ctx.origin + uploadDir.slice(3).replace(/\\/g, '/')

}

}

}

module.exports = ToolsService;

4.调用 controller

app/controller/article.js

// 保存头像/封面

async saveAvatar() {

const { ctx } = this;

const parts = ctx.multipart({ autoFields: true });

let files = {};

let stream;

while ((stream = await parts()) != null) {

if(!stream.filename){

break;

}

const fieldname = stream.fieldname; // file表单的名字

// 上传图片的目录

const dir = await this.service.tools.getUploadFile(stream.filename);

const target = dir.uploadDir;

const writeStream = fs.createWriteStream(target);

await pump(stream, writeStream);

files = Object.assign(files, {

[fieldname]: dir.saveDir

});

}

if(Object.keys(files).length > 0){

ctx.body = {

code: 200,

message: '图片上传成功',

data: files

}

}else{

ctx.body = {

code: 500,

message: '图片上传失败',

data: {}

}

}

}

5.配置路由

// 上传图片/头像/封面

router.post('/tools/saveavatar', controller.article.saveAvatar);

6.页面逻辑代码

封装组件

src/components/UploadAvatar.js

调用