egg接收存储图片
用户上传图片到服务器,服务器接收并存在本地。虽然现在大多数网站会选择第三方服务器做图片存储,比如七牛,但是很多小型网站,或者初级研发者,还会使用本地图片存储。1、如果前端用vue开发,上传图片请参考:https://blog.csdn.net/bocongbo/article/details/816707942、使用mz-modules依赖处理表单数据。因为官方提供的方法,多文件上传不友好...
·
用户上传图片到服务器,服务器接收并存在本地。虽然现在大多数网站会选择第三方服务器做图片存储,比如七牛,但是很多小型网站,或者初级研发者,还会使用本地图片存储。
1、如果前端用vue开发,上传图片请参考:https://blog.csdn.net/bocongbo/article/details/81670794
2、使用mz-modules依赖处理表单数据。因为官方提供的方法,多文件上传不友好,而且只能获取到文件前面的表单数据,后面的数据会丢失。安装mz-modules依赖
npm i mz-modules -S
3、配置访问地址router.js,注意要使用POST请求
router.post('/api/upload/img', controller.home.uploadImg);
4、编写controller控制器home.js
'use strict';
const Controller = require('egg').Controller;
// 文件存储
const fs = require('fs');
const path = require('path');
const pump= require('mz-modules/pump');
class HomeController extends Controller {
async uploadImg() {
let parts = this.ctx.multipart({ autoFields: true });
let stream, img_list = []; // 图片访问地址集合
while ((stream = await parts()) != null) {
if (!stream.filename) {
break;
}
// 文件名为:时间戳+随机字符串+.文件后缀
let filename = (new Date()).getTime() + Math.random().toString(36).substr(2) + path.extname(stream.filename).toLocaleLowerCase();
// 上传图片的目录
let target = 'app/public/admin/upload/' + filename;
img_list.push('/public/admin/upload/' + filename);
let writeStream = fs.createWriteStream(target);
await pump(stream, writeStream);
}
console.log(parts.field) // 表单其他数据,可以根据需要处理
this.ctx.body = {
url: img_list,
fields: parts.field
}
}
}
module.exports = HomeController;
更多推荐
已为社区贡献23条内容
所有评论(0)