Node Js form-data格式傳輸文件

Node Js 使用KOA處理form-data格式傳輸過來的文件

使用koa有一段時間了，評價是小巧精悍，只封裝了基本的如request對象和response對象到上下文中，其他功能基本上靠第三方中間件來實現。導致的問題是使用起來就不太方便了，比如用koa上傳文件，網上資料有限，對於小白而言，文件上傳操作就困難多了。

form表單上傳文件流程（PHP和node js）

文件上傳操作原理

form表單【注意：enctype=”multipart/form-data”】上傳文件時，首先會將文件上傳到你本機的temp目錄，然後執行move_upload_file(tmpfile,newfile);然後node會不會是這樣呢？答案是確定的，上傳文件大家都是一樣的思路。

    //var tmpath = path.join(os.tmpdir(), '1.txt');//模擬上傳到臨時目錄的文件  
    //console.log(tmpath);  
    //var ext = ".txt";//上傳後生成文件的後綴，一般和上傳的文件後綴一致  
    //var ph = path.join('public/upload', Date.parse(new Date()).toString() + ext);//生成新的上傳文件路徑全稱  
    //console.log(ph);  
    //var stream = fs.createWriteStream(ph);//創建一個可寫流  
    //fs.createReadStream(tmpath).pipe(stream);//可讀流通過管道寫入可寫流

然後分析了下上面代碼：

fs.createWriteStream(path.join(os.tmpdir(), Math.random().toString()));

這裏創建一個可寫的流對象，即創建一個表單上傳後移動到新目錄的空文件；而os.tmpDir()剛好是本機臨時目錄，上面代碼表示在臨時目錄下生成一個隨機數空文件；

part.pipe(stream); 

上面的代碼表示將可讀流對象內容寫入到可寫的流對象，即上面生成的臨時文件下的文件；part是將request裏面的文件對象解析成可讀流。

然後koa文件上傳原理就清楚了。通過表單上傳文件，文件默認會存放到本機臨時目錄下生成一個臨時文件。然後通過流的形式，打開這個臨時文件將數據寫入到一個新地址的可寫文件流裏面，前提是要提前創建這個空的可寫流文件，即我們上傳目標文件。

KOA2解析傳輸過來的post form-data信息

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

const bodyParser = require('koa-bodyparser');

const koaBody = require('koa-body');

const router = require('./router');


// 輸出請求路徑，每次請求都會輸出
app.use(async (ctx, next) => {
console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);
await next();
});

// 文件上傳，注意書寫的位置很重要，否則無法上傳
app.use(koaBody({ multipart: true }));

// 解析請求體
app.use(bodyParser());

// 使用路由
app.use(router());

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

總結一下的話，就是前端用form傳遞文件，bodyParse解析出這個form，對應的字段是ctx.request.body.files.字段名稱(eg: abc)，最後通過拷貝臨時的數據文件來達到上傳存儲的目的。

bodyParse解析出的格式：

{ fields: { aaa: '123345' },       //Text類型的解析到fields中
  files:                           //File類型的解析到files中
   { 
     abc: 
      File {
        domain: null,
        _events: {},
        _eventsCount: 0,
        _maxListeners: undefined,
        size: 12525,
        path: 'C:\\Users\\DANNYJ~1\\AppData\\Local\\Temp\\upload_d896dcc755fcd36156c6814aafb7685e',
        name: 'bamboo5.png',
        type: 'image/png',
        hash: null,
        lastModifiedDate: 2017-12-08T10:17:04.355Z,
        _writeStream: [Object] } 
     } 
}

KOA2將POST傳過來的文件存儲到本地

    var file = ctx.request.body.files.abc    //傳輸文件的name是abc
    console.log(ctx.request.body)

    var tmpath= file['path'];
    var tmparr =file['name'].split('.');
    var ext ='.'+tmparr[tmparr.length-1];
    var newpath =path.join('./', parseInt(Math.random()*100) + Date.parse(new Date()).toString() + ext);
    console.log(tmpath);
    console.log(newpath);
    var stream = fs.createWriteStream(newpath);//創建一個可寫流
    fs.createReadStream(tmpath).pipe(stream);//可讀流通過管道寫入可寫流

然後就會發現項目當前目錄下面就會多出上傳的文件了。