【サービスエンドの知識点】(15日間)ファイルアップロードの実現——30日間のnode+mongo+react+redux+express構築の完璧なリソースバックグラウンド管理システム+フロントエンド(全スタックエンジニアがantdと結合する)

このシリーズの文章は自分が開発の過程で、自分で学習を悟って、各方面の大師の経験を参考にして分かち合います.バックグラウンドの資源管理、添削と検索の操作は不可欠です.その中に資源を増やすのはすべての根本です.増加した資源の方式はたくさんあります.1.アップロードファイル2.コピーリンク3.在庫導入4.その他
今日は皆さんと共有したいのですが、一番積極的に、基本的な方法で、自主的に内容をアップロードするという形です.今日紹介する方法は三つあります.懸念を残して、始めましょう.
一、node+expressはファイルアップロードの常用方式を実現します.
一般的なアップロードの実現方法は、1.expressミドルウェアmultirモジュール(この効率が最高で、express 3.x原生でサポートし、express 4.xまで独立してモジュールになりました)2.connect-multipartyモジュールです. 公式は推奨しない )3.マルチプレックスモジュールを使って実現します.4.formidableプラグインを使って実現します.
二、マルチipad/form-dataを知る
まずenctypeという属性管理を知っているのはフォームのMIMEコードです.全部で3つの値があります.オプションは1.appication/x-www-form-urlenced 2.mltipad/form-data 3.text/pline 1.appication/x-wn-form-urlencodedです.フォーム送信のコードを設定する役割があります.例えば、Axject.ject.ject.ject.ject「アプリ/x-www-form-urlencoded」);書かないとエラーが発生しますが、htmlのフォームにはenctype=aplication/x-www-form-urlencodedを書かなくてもいいです.デフォルトのHTMLフォームはこのようなトランスポートコードのタイプです.2.multimp/form-dataはトランスポートデータを作成するための特殊なタイプです.主に私達がアップロードしたテキスト以外の内容です.本転送の意味は、メールを送る時にこのタイプのコードを設定すると、受信時のコードの乱れが発生します.ネットワーク上では、text/playinとtext/htmlをよく比較しますが、実はこの二つはよく区別されています.前者はテキストファイルを転送するために使われます.後者はhtmlコードを伝えるためのコードのタイプです.ヘッダファイルを送る時にのみ使えます.①と③はアップロードできません.ファイルは、multiipad/form-dataだけがファイルデータを完全に伝達することができます.
enctype='multiipad/form-data'を採用すると、request payloadでデータを提出します.
三、multierモジュールのアップロード問題
githubアドレス: https://github.com/expressjs/multer https://www.npmjs.com/package/multer
Multierはnodeの中間部品で、multiiprt/form-dataタイプで提出して、トップにbusboyモジュールを書き込むと、効率が速くなります.
装着multier:

npm install --save multer

公式の基本例:

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})

var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body will contain the text fields, if there were any
})

通過することもできます

var upload = multer({dest:"uploads/"}).single('avatar');
app.post('/profile', function (req, res) {
  upload(req, res, function (err) {
  if (err) {
    console.log(req.body);   //     
    console.log(req.file);   
    // An error occurred when uploading
    return
  }
  // Everything went fine
  })
})

四、マルチプレックスモジュールのアップロード問題
githubアドレス: https://github.com/andrewrk/node-multiparty
multipartyモジュールを使用するには、「multiad/form-data」タイプを使用しなければなりません.busboyモジュールにより解析効率が向上します.
multiiprtyをインストールする:

npm install multiparty

実はこれも簡単です.

var multiparty = require('multiparty');
var http = require('http');
var util = require('util');
var fs = require("fs");

http.createServer(function(req, res) {
  if (req.url === '/upload' && req.method === 'POST') {
    //         
    var form = new multiparty.Form();
   //    
   form.encoding = 'utf-8';
   //        
    form.uploadDir = "uploads/images/";
  //          
  form.maxFilesSize = 2 * 1024 * 1024;
  //form.maxFields = 1000;             
  form.parse(req, function(err, fields, files) {
    console.log(files.originalFilename);
    console.log(files.path);
    //        
   fs.renameSync(files.path,files.originalFilename);
    res.writeHead(200, {'content-type': 'text/plain'});
    res.write('received upload:

');
    res.end(util.inspect({fields: fields, files: files}));
  });

    return;
  }

  // show a file upload form
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
    '
'+
    '
'+
    '
'+
    ''+
    '
'
  );
}).listen(8080);

五、formidableモジュールのアップロード問題
formidableにプラグインをアップロードするのも、githubでは同じような機能が人気です.
githubアドレス: https://github.com/felixge/node-formidablehttps://www.npmjs.org/package/formidable
利点:
1.速度が速い(~500 M/s)、non-buffering multiiPad解析がない
2.アップロードファイルディスクに自動書き込み
3.占有メモリが低い
4.優雅なエラー処理
5.非常に高いテストのカバー率
formidableのインストール:

npm install formidable@latest

公式例:

var formidable = require('formidable'),
    http = require('http'),
    util = require('util');

http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    //      
    var form = new formidable.IncomingForm();
    //    
    form.encoding = 'utf-8';
    //        
    form.uploadDir = "uploads/images/";
    //    
    form.keepExtensions = true;
    //             
    form.maxFieldsSize = 2 * 1024 * 1024;
    //form.maxFields = 1000;             

    form.parse(req, function(err, fields, files) {//  files    File  ，   h5      ，   w3c File api。         
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('      ');
      res.end(util.inspect({fields: fields, files: files}));
    });

    return;
  }

  // show a file upload form
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
    '
'+
    '
'+
    '
'+
    ''+
    '
'
  );
}).listen(8080);

   formidable FIle         

1)     Formidable.IncompingFormオブジェクトを作成します.
var form=new formidable.IncompingForm()
2)     フォームドメインの符号化をform.encoding='utf-8'に設定します.
3)     form.uplloadDir="/my/dir";アップロードファイルの保存フォルダを設定し、デフォルトはシステムの一時フォルダです.fs.rename()を使ってアップロードファイルの保存場所とファイル名を変更することができます.
4)     form.keep Extensions=false;この属性をtrueに設定すると、アップロードされたファイルが元のファイルの拡張子を維持することができます.
5)     form.type読み取り専用で、要求の種類によって、「multiiprt」or「urlencoded」を取ります.
6)     form.maxFieldsSize=2*1024*1024;すべての記憶テーブルの単字体領域の大きさを制限し(fileフィールドを除く)、超過するとerrorイベントが発生し、デフォルトは2 Mである.
7)     form.maxFields=1000設定はどのぐらいのクエリ文字列を変換できますか?デフォルトは1000です.
8)     form.hash=false;アップロードファイルのチェックコードを設定すると、2つの取得値'shar 1'or'md 5'があります.
9)     form.multiles=false;この機能をオンにして、form.parse()メソッドを呼び出すと、コールバック関数のfilesパラメータは一つのfile配列になります.配列の各メンバーは一つのFileオブジェクトです.この機能はhtml 5のmultiple特性サポートが必要です.
10)   form.bytes Receivedはサーバに戻って、現在のフォームデータの何バイトを受信しましたか?
11)   form.bytes Expectedは、現在のフォームのすべてのデータを受信するサイズを返します.
12)   form.parse(request,calback)この方法は、要求に含まれるフォームデータを変換します.calbackは、フィールド領域とファイル情報のすべてを含みます.
　　  form.parse(req,function(err,fields,files)｛
 //…  
　　  });
13)    form.onPart(part);multiipadフローを処理する方法を再ロードできます.そうするとfieldとfile事件の発生を禁止します.自分でこれらのことを処理しなければなりません.
　　   form.onPart=function(part){
  part.addListener('data',function()
    　　          //...
  ｝
)
　　  formdableに一部のことだけを処理したいなら、こうしてもいいです.
　　  form.onPart=function(part){
  if(!part.filename){
    　　　　  //ファイル以外のすべての部分をformidableに処理させます.
   　　    form.handlePart(part);
　　 )
)
14)   formidable.Fileオブジェクト
A.      file.size=0アップロードファイルのサイズは、アップロードされている場合、アップロードされている部分のサイズを表します.
B.      file.path=nullでファイルをアップロードするパスです.formidableに一時フォルダを作成したくないなら、fileBegainイベントでパスを変更できます.
C.      file.name=nullアップロードファイルの名前
D.     file.type=nullアップロードファイルのmimeタイプ
E.      file.lastModifiedDate=null時間オブジェクト、ファイルをアップロードして最近一回修正された時間
F.      file.hash=nullはファイルのhash値を返します.
G.     JSON.strigify(file.toJSON()を使って出力ファイルの情報をフォーマットすることができます.
15)   form.on('progress'、function(bytes Received、bytes Expected){}があると、データブロックが処理された後にこのイベントがトリガされ、プログレスバーの作成に非常に役立ちます.
16)   form.on(''field',function(*,value){}は、フィールド/値ペアが受信されるたびに、このイベントをトリガします.
17)   form.on('fileBegin's,function(株);  postストリームで新しいファイルのいずれかが検出されると、イベントがトリガされます.
18)   form.on(''file',function(*,file){};フィールド/ファイルのペアが受信されるたびに、このイベントがトリガされます.
19)   form.on(''error',function');アップストリーム中にエラーが発生するとイベントが発生し、エラーが発生した場合、requestのdataイベントを引き続きトリガするためには、request.reume()メソッドを手動で起動しなければならない.
20)   form.on('aboted',function(){}は、ユーザが要求を中止するとイベントをトリガし、socketのtimeoutおよびcloseイベントもこのイベントをトリガし、このイベントがトリガされると、errorイベントもトリガされる.
21)form.on('end',function(){})、すべての要求が受信され、すべてのファイルがサーバにアップロードされている場合、イベントはトリガとなります.この場合、クライアントに要求を送信することができます.
注:本稿の翻訳はhttps://www.npmjs.com/package/formidable