【Koa】Koa利用中間件koa-body實現文件上傳

  1,下載koa-body包

        npm install koa-body --save        官方API:https://cnpmjs.org/package/koa-body

  2,在項目中引入koa-body中間件

    // koaBody配置
    const koaBody = require('koa-body');
    app.use(koaBody({
      multipart: true, // 是否可以多選
      formidable: {
        maxFileSize: 200*1024*1024    // 設置上傳文件大小最大限制,默認2M
      }
    }));

  3,獲取上傳的文件和保存

     1)上傳單個文件:

    // 上傳單個文件
    router.post('/fileUpload', async (ctx,next) => {
      // 獲取上傳文件
      // 新版本的koa-body通過ctx.request.files獲取上傳的文件
      // 舊版本的koa-body通過ctx.request.body.files獲取上傳的文件
      const file = ctx.request.files.file;
      // 創建可讀流
      const reader = fs.createReadStream(file.path);
      let filePath = path.join(__dirname, '/upload/') + `/${file.name}`;
      // 創建可寫流
      const upStream = fs.createWriteStream(filePath);
      // 可讀流通過管道寫入可寫流
      reader.pipe(upStream);
      return ctx.body = "上傳成功!";
    })

     2)上傳多個文件:

    // 上傳多個文件
    router.post('/uploadfiles', async (ctx, next) => {
      // 獲取上傳文件
      // 新版本的koa-body通過ctx.request.files獲取上傳的文件
      // 舊版本的koa-body通過ctx.request.body.files獲取上傳的文件
      const files = ctx.request.files.file; // 獲取上傳文件
      for (let file of files) {
        // 創建可讀流
        const reader = fs.createReadStream(file.path);
        // 獲取上傳文件擴展名
        let filePath = path.join(__dirname, '/upload/') + `/${file.name}`;
        // 創建可寫流
        const upStream = fs.createWriteStream(filePath);
        // 可讀流通過管道寫入可寫流
        reader.pipe(upStream);
      }
      return ctx.body = "上傳成功!";
    });

   4,完整代碼:

const Koa = require('koa');
const app = new Koa();
const fs = require('fs');
const path = require('path');

// 注意require('koa-router')返回的是函數:
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');

// koaBody配置
const koaBody = require('koa-body');
app.use(koaBody({
  multipart: true, // 是否可以多選
  formidable: {
    maxFileSize: 200*1024*1024    // 設置上傳文件大小最大限制,默認2M
  }
}));

// 上傳文件頁面
router.get('/file', async (ctx,next) => {
  ctx.response.body =
    `<h1>表單提交:</h1>
     <form action="/fileUpload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file" value="" multiple="multiple" />
        <input type="submit" value="提交"/>
     </form>`;
  await next();
})

// 上傳單個文件
router.post('/fileUpload', async (ctx,next) => {
  // 獲取上傳文件
  // 新版本的koa-body通過ctx.request.files獲取上傳的文件
  // 舊版本的koa-body通過ctx.request.body.files獲取上傳的文件
  const file = ctx.request.files.file;
  // 創建可讀流
  const reader = fs.createReadStream(file.path);
  let filePath = path.join(__dirname, '/upload/') + `/${file.name}`;
  // 創建可寫流
  const upStream = fs.createWriteStream(filePath);
  // 可讀流通過管道寫入可寫流
  reader.pipe(upStream);
  return ctx.body = "上傳成功!";
})

// 上傳多個文件
router.post('/uploadfiles', async (ctx, next) => {
  // 獲取上傳文件
  // 新版本的koa-body通過ctx.request.files獲取上傳的文件
  // 舊版本的koa-body通過ctx.request.body.files獲取上傳的文件
  const files = ctx.request.files.file; // 獲取上傳文件
  for (let file of files) {
    // 創建可讀流
    const reader = fs.createReadStream(file.path);
    // 獲取上傳文件擴展名
    let filePath = path.join(__dirname, '/upload/') + `/${file.name}`;
    // 創建可寫流
    const upStream = fs.createWriteStream(filePath);
    // 可讀流通過管道寫入可寫流
    reader.pipe(upStream);
  }
  return ctx.body = "上傳成功!";
});

// pots請求,參數解析插件
app.use(bodyParser());
// 引入路由插件
app.use(router.routes());

app.listen(3000);
console.log('app started at port 3000...');

  參考鏈接:https://www.jianshu.com/p/34d0e1a5ac70

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