快捷導(dǎo)航

NodeJs form-data格式傳輸文件的方法

更新時(shí)間：2017年12月13日 16:23:10 作者：wj199395

這篇文章主要介紹了NodeJs form-data格式傳輸文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了Node Js 使用KOA處理form-data格式傳輸過來的文件，分享給大家。具體如下：

使用koa有一段時(shí)間了，評(píng)價(jià)是小巧精悍，只封裝了基本的如request對(duì)象和response對(duì)象到上下文中，其他功能基本上靠第三方中間件來實(shí)現(xiàn)。導(dǎo)致的問題是使用起來就不太方便了，比如用koa上傳文件，網(wǎng)上資料有限，對(duì)于小白而言，文件上傳操作就困難多了。

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

文件上傳操作原理

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

  //var tmpath = path.join(os.tmpdir(), '1.txt');//模擬上傳到臨時(shí)目錄的文件 
  //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);//創(chuàng)建一個(gè)可寫流 
  //fs.createReadStream(tmpath).pipe(stream);//可讀流通過管道寫入可寫流

然后分析了下上面代碼：

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

這里創(chuàng)建一個(gè)可寫的流對(duì)象，即創(chuàng)建一個(gè)表單上傳后移動(dòng)到新目錄的空文件；而os.tmpDir()剛好是本機(jī)臨時(shí)目錄，上面代碼表示在臨時(shí)目錄下生成一個(gè)隨機(jī)數(shù)空文件；

part.pipe(stream);

上面的代碼表示將可讀流對(duì)象內(nèi)容寫入到可寫的流對(duì)象，即上面生成的臨時(shí)文件下的文件；part是將request里面的文件對(duì)象解析成可讀流。

然后koa文件上傳原理就清楚了。通過表單上傳文件，文件默認(rèn)會(huì)存放到本機(jī)臨時(shí)目錄下生成一個(gè)臨時(shí)文件。然后通過流的形式，打開這個(gè)臨時(shí)文件將數(shù)據(jù)寫入到一個(gè)新地址的可寫文件流里面，前提是要提前創(chuàng)建這個(gè)空的可寫流文件，即我們上傳目標(biāo)文件。

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');
// 輸出請(qǐng)求路徑，每次請(qǐng)求都會(huì)輸出
app.use(async (ctx, next) => {
console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);
await next();
});
// 文件上傳，注意書寫的位置很重要，否則無法上傳
app.use(koaBody({ multipart: true }));
// 解析請(qǐng)求體
app.use(bodyParser());
// 使用路由
app.use(router());
app.listen(3000);
console.log('app started at port 3000...');

總結(jié)一下的話，就是前端用form傳遞文件，bodyParse解析出這個(gè)form，對(duì)應(yīng)的字段是ctx.request.body.files.字段名稱(eg: abc)，最后通過拷貝臨時(shí)的數(shù)據(jù)文件來達(dá)到上傳存儲(chǔ)的目的。

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傳過來的文件存儲(chǔ)到本地

  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);//創(chuàng)建一個(gè)可寫流
  fs.createReadStream(tmpath).pipe(stream);//可讀流通過管道寫入可寫流

然后就會(huì)發(fā)現(xiàn)項(xiàng)目當(dāng)前目錄下面就會(huì)多出上傳的文件了。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: