1.在web start server 1中,koa2拓展了很多功能,比如get和post数据交互和静态资源访问配置,看起来确实是很不错了,但还是欠缺一些核心的功能的,这里继续解决欠缺的问题。
2.图片上传到服务器(koa-multer),安装代码如下
npm install multer
3.引入模块
const multer = require('koa-multer');
3.配置上传信息,上传的时候在服务器创建文件的时候,需要知道存放位置和存放后文件名
const upload = multer({ dest: 'public/' }); //配置存放位置
router.post('/mians', upload.single('file'), function(ctx, next){
ctx.body = ctx;
});
//upload.single('file') //这里的file对应客户端的name=‘file’,因为通过这个key去读值得,
//但是在一些框架中不需要填写,koa-multer强制填写,不然就上传不上去
//上面就单纯的解决了上传的存放文件夹,但是保存文件的时候并不能设置上传文件类型
//上传的文件的文件名:4d6f9d0eba4843b9d2434de2cf15f4e6
//正常的情况应该:4d6f9d0eba4843b9d2434de2cf15f4e6.png||...
所以还需要解决文件名问题
4.解决上传文件名
var storage = multer.diskStorage({
//文件保存路径
destination: function (req, file, cb) {
cb(null, 'public/')
},
//修改文件名称
filename: function (req, file, cb) {
console.log(file);
//上传的时候打印file信息如下:
{ fieldname: 'file',
originalname: 'wxad17d555db856a24.o6zAJsza6mt-MUDO7W9s4SDSUxm0.Ci8sqRtARgBS989a10e83d85703b45d58c4441dacc10.png',
encoding: '7bit',
mimetype: 'image/png'
}
//第一种方式,对originalname处理,以点分割成数组,数组的最后一项就是后缀名
// var fileFormat = (file.originalname).split(".");
// cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
//第二种方式,对mimetype处理
建议选择第二种方式处理,安全问题
}
})
const upload = multer({"storage":storage}); //配置对象
router.post('/mians', upload.single('file'), function(ctx, next){
ctx.body = ctx;
});
5.完整案例
const Koa = require('koa');
const router = require('koa-router')();
const postbody = require('koa-bodyparser');
const static = require('koa-static');
const multer = require('koa-multer');
const app = new Koa();
app.use(postbody());
app.use(static( __dirname,'./public'));
app.use(static( __dirname,'./logo'));
var storage = multer.diskStorage({
//文件保存路径
destination: function (req, file, cb) {
cb(null, 'public/')
},
//修改文件名称
filename: function (req, file, cb) {
var fileFormat = (file.originalname).split("."); //以点分割成数组,数组的最后一项就是后缀名
cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
})
const upload = multer({"storage":storage});
router.post('/mians', upload.single('file'), function(ctx, next){
ctx.body = ctx;
});
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);
6.客户端请求:header
header: {
'content-type': 'multipart/form-data' // 默认值
},