koa-multer 實現圖片上傳

案例

上傳單張圖片

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')
})

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章