案例
上傳單張圖檔
const Koa = require('koa');
const multer = require('koa-multer');
const Router = require('koa-router')();
const App = new Koa();
const storage = multer.diskStorage({
destination:function (req,file,cb) {
cb(null,'public/uploads/') // 儲存路徑
},
filename:function (req,file,cb) {
var fileFormat = (file.originalname).split('.'); // 擷取檔案字尾
cb(null,Date.now() + '.' + fileFormat[fileFormat.length -1]) // 生成檔案
}
})
var upload = multer({storage:storage});
Router.get('/', ctx => {
ctx.body = `<html>
<form action="/doAdd" method="POST" enctype="multipart/form-data">
<input type="file" name="face">
<input type="submit">
</form>
</html>`
})
/**
* upload.single('face') face 是檔案域名稱跟表單中的name的值對應
* */
Router.post('/doAdd',upload.single('face'),async (ctx,next)=>{
ctx.body = {
filename:ctx.req.file.filename,
}
})
App.use(Router.routes());
App.use(Router.allowedMethods());
App.listen(3000,function () {
console.log('quick start at port 3000')
})
上傳多張圖檔
const Koa = require('koa');
const multer = require('koa-multer');
const Router = require('koa-router')();
const App = new Koa();
const storage = multer.diskStorage({
destination:function (req,file,cb) {
cb(null,'public/uploads/') // 儲存路徑
},
filename:function (req,file,cb) {
var fileFormat = (file.originalname).split('.');
cb(null,Date.now() + '.' + fileFormat[fileFormat.length -1])
}
})
var upload = multer({storage:storage});
Router.get('/', ctx => {
ctx.body = `<html>
<form action="/doAdd" method="POST" enctype="multipart/form-data">
<input type="file" name="face" multiple maxlength="3">
<input type="file" name="aaa" multiple maxlength="3">
<input type="submit">
</form>
</html>`
})
/**
* upload.single 修改為 upload.fields [{name:'face'},{name:'aaa'}] 對應的檔案域的配置
* ctx.req.files 接受上傳的圖檔
* */
Router.post('/doAdd',upload.fields([{name:'face'},{name:'aaa'}]),async (ctx,next)=>{
console.log(ctx.req.files);
ctx.body = [{
filename:ctx.req.files,
}]
})
App.use(Router.routes());
App.use(Router.allowedMethods());
App.listen(3000,function () {
console.log('quick start at port 3000')
})
上傳檔案和表單其他内容：
const Koa = require('koa');
const multer = require('koa-multer');
const Router = require('koa-router')();
const BodyParse = require('koa-bodyparser');
const App = new Koa();
App.use(BodyParse());
const storage = multer.diskStorage({
destination:function (req,file,cb) {
cb(null,'public/uploads/') // 儲存路徑
},
filename:function (req,file,cb) {
var fileFormat = (file.originalname).split('.');
cb(null,Date.now() + '.' + fileFormat[fileFormat.length -1])
}
})
var upload = multer({storage:storage});
Router.get('/', ctx => {
ctx.body = `<html>
<form action="/doAdd" method="POST" enctype="multipart/form-data">
<input type="text" name="title">
<input type="file" name="face" multiple maxlength="3">
<input type="file" name="aaa" multiple maxlength="3">
<input type="submit">
</form>
</html>`
})
/**
* upload.single 修改為 upload.fields [{name:'face'},{name:'aaa'}] 對應的檔案域的配置
* ctx.req.files 接受上傳的圖檔
* */
Router.post('/doAdd',upload.fields([{name:'face'},{name:'aaa'}]),async (ctx,next)=>{
ctx.body = {title:ctx.req.body.title,files:ctx.req.files};
})
App.use(Router.routes());
App.use(Router.allowedMethods());
App.listen(3000,function () {
console.log('quick start at port 3000')
})
![koa2開發環境搭建目錄[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)