NodeJs koa2實現文件上傳

[轉載自：]https://www.jianshu.com/p/34d0e1a5ac70

知識講解

koa2框架是一個基於中間件的框架，也就是說，需要使用到的功能，比如路由（koa-router），日志（koa-logger），都可以找到相應的中間件庫，即npm包，然后通過app.use(...)引進來。
本文的主題：實現文件上傳就是通過引用相應的中間來實現的。
我查了一下資料，發現可以實現文件上傳的中間件有3個，選擇其中一個就可以了：
1）koa-body
2）busboy
3）koa-multer
關於以上三種中間件的差異可以自行網上查資料，這里我選擇比較順眼的koa-body，實用簡單。

代碼實現

步驟一：下載koa-body npm包

npm install koa-body –save

npm install koa-body --save

步驟二：在koa項目中引用koa-body中間件

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

步驟三：使用koa-body中間件后，即可通過ctx.request.files獲取上傳的文件

提醒：
新版本的koa-body通過ctx.request.files獲取上傳的文件
舊版本的koa-body通過ctx.request.body.files獲取上傳的文件
朋友們千萬不要入坑哈，本人就入坑過半天。

步驟四：獲取到文件之后，通過fs將文件保存到服務器的指定目錄

上傳單個文件：

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

 

上傳多個文件:

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

前端代碼

順便把前端的代碼也附上，前端通過提交表單，把文件發送到你的服務器

<form action="http://localhost:8080/api/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file" value="" multiple="multiple" />
    <input type="submit" value="提交"/>
</form>

 

最后總結

今天在項目中實現文件上傳的時候，也一不小心入了一下坑，為什么呢？（請看以上步驟三）
在網上找的大部分資料都是通過ctx.request.body.files來獲取上傳的文件，這個是舊版本的koa-body的獲取文件方法，為了安全考慮，新版本的koa-body采用ctx.request.files來獲取文件。
總結原因，以后要學會找官方文檔，以官方文檔為主，其他文檔為輔，這樣才對。