Nodejs高度：急行+のmulterベースのファイルのアップロード

概要

画像のアップロードWeb開発は、この点でのノードのコミュニティはまた、比較的よくサポートされている、頻繁に使用する機能です。

一般的に使用されるオープンソースコンポーネントが持っているmulter、手ごわい両方のオープンソースコンポーネントを、というように、あなたは簡単に写真をアップロードするために取得することができます。

この資料では、以下、後続の章は、技術的な実装の詳細を掘るだろう説明しています。することができ、すべての例のコードサンプルですこちらをご覧ください。

基本例：Expressで、multerがマルチマップのアップロードの単一のビューを達成。
共通API：情報アップロードした写真にアクセスします。
高度な使用：自己精細画像のパスは、名前を保存します。

環境の初期化

非常にシンプルなコマンドライン。

NPMは、エクスプレスクラウドベリーのクラウドベリーをインストール--save

以下の各例は、以下の2つのファイルがあります

➜  upload-custom-filename git:(master) ✗ tree -L 1
.
├── app.js # 服务端代码，用来处理文件上传请求
├── form.html # 前端页面，用来上传文件

基本例：単一イメージのアップロード

完全なサンプルコードを参照してくださいここに。

app.js。

たのfs =は（ 'FS'を必要）。
たアウト=必要（「・アウト」）;
たクラウドベリー=は（「クラウドベリー」が必要です）

したアプリ= アウト（）;
たアップロード=クラウドベリー（{DEST： 'アップロード/' }）。

// シングル画像アップロード 
app.post（ '/アップロード'、upload.single（ 'ロゴ'）、機能（REQ、RES、次）{
    res.send（{ret_code： '0' }）。
}）;

app.get（ '/フォーム'、関数（REQ、RES、次）{
     VARの形式= fs.readFileSync（ './ form.html'、{エンコーディング'UTF8' }）。
    res.send（フォーム）
}）;

app.listen（ 3000）。

form.html。

< フォームアクション= "/アップロード・シングル" 方式= "ポスト" のenctype = "マルチパート/フォームデータ" > 
    < h2の>单图上传</ H2 > 
    < 入力タイプ= "ファイル" 名= "ロゴ" > 
    < 入力タイプ= "送信" 値を= "提交" > 
</ フォーム>

サービスを実行します。

node app.js

アクセス http://127.0.0.1:3000/form 、画像を選択し、「送信」をクリックし、完了です。その後、あなたはアップロードディレクトリの下に多くの写真が表示されます。

基本例：マルチイメージのアップロード

完全なサンプルコードを参照してくださいここに。

コード行にupload.array（「ロゴ」、2）に、前述のupload.single（「ロゴ」）ほとんどが容易。彼は言った：2件の画像のアップロード、およびロゴのname属性をサポートしています。

app.js。

たのfs =は（ 'FS'を必要）。
たアウト=必要（「・アウト」）;
たクラウドベリー=は（「クラウドベリー」が必要です）

したアプリ= アウト（）;
たアップロード=クラウドベリー（{DEST： 'アップロード/' }）。

// 複数アップロード図の 
app.post（ '/アップロード'、upload.array（ 'ロゴ'、2）、関数（REQ、RES、NEXT）{
    res.send（{ret_code： '0' }）。
}）;

app.get（ '/フォーム'、関数（REQ、RES、次）{
     VARの形式= fs.readFileSync（ './ form.html'、{エンコーディング'UTF8' }）。
    res.send（フォーム）
}）;

app.listen（ 3000）。

form.html。

< フォームアクション= "/アップロードマルチ" 方式= "ポスト" のenctype = "マルチパート/フォームデータ" > 
    < h2の>多图上传</ H2 > 
    < 入力タイプ= "ファイル" 名= "ロゴ" > 
    < 入力タイプ= "ファイル" 名= "ロゴ" > 
    < 入力タイプは= "送信" 値を= "提交" > 
</ フォーム>

同じ試験手順は、ここではそれらを繰り返すありません。

アップロードされた画像情報を取得します。

完全なサンプルコードを参照してくださいここに。

多くの場合、サーバーに保存された写真に加えて、我々は、データベース内の情報保存された画像のような他のものの多くを行う必要があります。

一般に、このような経路ローカルに保存された元のファイル名、ファイルタイプ、ファイルサイズ、などの情報を用います。multerでは、我々は簡単にそのような情報を入手することができます。

次のコードに示すように、単一ファイルの例やケースをアップロードする、情報は、ファイル意志multerのreq.fileに書き込まれます。

app.js。

たのfs =は（ 'FS'を必要）。
たアウト=必要（「・アウト」）;
たクラウドベリー=は（「クラウドベリー」が必要です）

したアプリ= アウト（）;
たアップロード=クラウドベリー（{DEST： 'アップロード/' }）。

// シングル画像アップロード 
app.post（ '/アップロード'、upload.single（ 'ロゴ'）、機能（REQ、RES、次）{
     VARのファイル= req.file。

    console.log（ 'ファイルタイプ：％S'が、file.mimetype）。
    console.log（ '元のファイル名：％S' 、file.originalname）。
    console.log（ 'ファイルサイズ：％S'が、file.size）。
    console.log（ 'ファイルパス：％S' 、file.path）。

    res.send（{ret_code： '0' }）。
}）;

app.get（ '/フォーム'、関数（REQ、RES、次）{
     VARの形式= fs.readFileSync（ './ form.html'、{エンコーディング'UTF8' }）。
    res.send（フォーム）
}）;

app.listen（ 3000）。

form.html。

< フォームアクション= "/アップロード" 方式= "ポスト" のenctype = "マルチパート/フォームデータ" > 
    < h2の>单图上传</ H2 > 
    < 入力タイプ= "ファイル" 名= "ロゴ" > 
    < 入力タイプ= "送信" 値= "提交" > 
</ フォーム>

サービスを開始し、ファイルをアップロードした後、コンソールに印刷された情報が表示されます。

文件类型：image/png
原始文件名：1.png
文件大小：18379
文件保存路径：upload/b7e4bb22375695d92689e45b551873d9

カスタムファイルアップロードパス、名

時々、私たちは、ファイルのアップロード名をカスタマイズしたいパスは、multerも容易に達成することができます。

保存したカスタムローカルパス

私たちは、リスト上の次のdestの設定項目を変更し、私のアップロードディレクトリにファイルをアップロードしたいのと同じくらい簡単。

たアップロード=ボラ（{DEST： 'アップロード/'}）。

上記の構成では、すべてのリソースは、同じディレクトリに格納されています。時々、私たちは、あなたは、次のセクションの内容を参照することができ、別のファイル用にパーソナライズする必要があります。

カスタムローカルに保存したファイル名

完全なサンプルコードを参照してくださいここに。

少し長いコード、単一のと同じくらい簡単。multerは提供して ストレージに パーソナライズするためにリソースパス、ファイル名を保存するには、このパラメータを。

次の使用に注意してください。

目的地：リソースを節約するために、パスを設定します。この設定項目がない場合、デフォルトで/ tmp /アップロードに保存されることに注意してください。また、独自のパスを作成する必要があります。
ファイル名：ローカルリソースを節約するために、ファイル名を設定します。

app.js。

たのfs =は（ 'FS'を必要）。
たアウト=必要（「・アウト」）;
たクラウドベリー=は（「クラウドベリー」が必要です）

したアプリ= アウト（）;

VaRの CREATEFOLDER = 機能（フォルダ）{
     しようと{
        fs.accessSync（フォルダ）。 
    } キャッチ（E）{
        fs.mkdirSync（フォルダ）。
    }  
}。

たフォルダ=「./upload/」をアップロードします。

CREATEFOLDER（uploadFolder）。

// カスタム属性のファイル名により、
VaRのストレージ= multer.diskStorage（{
    宛先：関数（REQ、ファイル、CB）{
        CB（ヌル、uploadFolder）;     // パスの注意を保存します。必要が作成します
    }、
    ファイル名：機能（REQ、ファイル、CB）{
         // フィールド名+タイムスタンプにファイル名を保存し、そのよう1478521468943-ロゴとして 
        CB（ヌル、file.fieldname + ' - ' + Date.now（））;  
    }
}）;

// ストレージオプションによってアップロードの動作をカスタマイズするための
VARアップロード= multer（{：ストレージストレージを}）

// シングル画像アップロード 
app.post（ '/アップロード'、upload.single（ 'ロゴ'）、機能（REQ、RES、次）{
     VARのファイル= req.file。
    res.send（{ret_code： '0' }）。
}）;

app.get（ '/フォーム'、関数（REQ、RES、次）{
     VARの形式= fs.readFileSync（ './ form.html'、{エンコーディング'UTF8' }）。
    res.send（フォーム）
}）;

app.listen（ 3000）。

form.html。

< フォームアクション= "/アップロード" 方式= "ポスト" のenctype = "マルチパート/フォームデータ" > 
    < h2の>单图上传</ H2 > 
    < 入力タイプ= "ファイル" 名= "ロゴ" > 
    < 入力タイプ= "送信" 値= "提交" > 
</ フォーム>

試験手順は、詳細には触れませんが、アクセスが効果を知っています。

背中に書かれました

本論文では、基本的な使用multerが導入された、それは自然の、あまりにも多くのものの原則を伴いませんでした。諺にも通り 魚を与えるよりも、魚に委任以降の章では、読者がさらに理解を深めてファイルをアップロードするので、ファイルは、掘削の詳細をアップロードしました。