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\\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
调用
