Nodejs の高度な: Express+multer に基づくファイルのアップロード

環境の初期化

は非常に簡単で、たった 1 行のコマンドです。 #ファイルのアップロード要求を処理するために使用されるサーバー側のコード§── form.html # ファイルのアップロードに使用されるフロントエンド ページ

基本的な例: 単一画像のアップロード

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

app.js。

var fs = require('fs');
var express = require('express');
var multer  = require('multer')

var app = express();
var upload = multer({ dest: 'upload/' });

// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
    res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
    var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
    res.send(form);
});

app.listen(3000);

form.html。

rree

サービスを実行します。

<form action="/upload-single" method="post" enctype="multipart/form-data">
    <h2>单图上传</h2>
    <input type="file" name="logo">
    <input type="submit" value="提交">
</form>

http://127.0.0.1:3000/form にアクセスし、画像を選択して、[送信] をクリックして完了です。次に、アップロード ディレクトリに追加の画像が表示されます。

基本的な例: 複数画像のアップロード

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

コードはこれ以上に単純です。前の Upload.single('logo') を Upload.array('logo', 2) に変更するだけです。示す: 2 つの画像の同時アップロードをサポートし、名前属性はロゴです。

app.js。

node app.js

form.html。

var fs = require('fs');
var express = require('express');
var multer  = require('multer')

var app = express();
var upload = multer({ dest: 'upload/' });

// 多图上传
app.post('/upload', upload.array('logo', 2), function(req, res, next){
    res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
    var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
    res.send(form);
});

app.listen(3000);

同じテスト手順なので、繰り返す必要はありません。

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

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

多くの場合、画像をサーバーに保存するだけでなく、画像情報をデータベースに保存するなど、他にも多くのことを行う必要があります。

元のファイル名、ファイルタイプ、ファイルサイズ、ローカル保存パスなどの一般的に使用される情報。 multer の助けを借りて、この情報を簡単に入手できます。

これはまだ単一ファイルのアップロードの例です。この時点では、次のコードに示すように、multer はファイル情報を req.file に書き込みます。

app.js。

<form action="/upload-multi" method="post" enctype="multipart/form-data">
    <h2>多图上传</h2>
    <input type="file" name="logos">
    <input type="file" name="logos">
    <input type="submit" value="提交">
</form>

form.html。

var fs = require('fs');
var express = require('express');
var multer  = require('multer')

var app = express();
var upload = multer({ dest: 'upload/' });

// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
    var file = 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('/form', function(req, res, next){
    var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
    res.send(form);
});

app.listen(3000);

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

ファイルタイプ:image/png

元のファイル名:1.png

ファイルサイズ:18379ファイル保存パス:upload/b7e4bb22375695d92689e45b551873d9

カスタマイズされたファイルアップロードパス、名前

時々、ファイルアップロードパスをカスタマイズしたいことがあります。 name や multer も簡単に実装できます。

ローカル保存パスのカスタマイズ

たとえば、ファイルを my-upload ディレクトリにアップロードする場合は、dest 構成項目を変更するだけです。

<form action="/upload" method="post" enctype="multipart/form-data">
    <h2>单图上传</h2>
    <input type="file" name="logo">
    <input type="submit" value="提交">
</form>

上記の設定では、すべてのリソースが同じディレクトリに保存されます。場合によっては、さまざまなファイルの設定をカスタマイズする必要がある場合があります。その場合は、次のセクションを参照してください。

ローカルに保存されたファイル名をカスタマイズします

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

コードは少し長くなりますが、同じくらい簡単です。 Multer は、リソース保存のパスとファイル名をパーソナライズするための storage パラメータを提供します。

使用上の注意は以下のとおりです:

destination: リソースの保存パスを設定します。この設定項目がない場合、デフォルトで /tmp/uploads に保存されることに注意してください。さらに、パスは自分で作成する必要があります。

filename: ローカルに保存されたリソースのファイル名を設定します。

app.js。

var upload = multer({ dest: 'upload/' });

form.html。

rreee

テスト手順については詳しく説明しませんが、実際にアクセスしていただければ、その効果がわかります。

後ろに書いてあります

この記事では multer の基本的な使用法を紹介しており、あまり多くの原則については説明しません。ことわざにあるように、人に釣りを教えるよりも、釣りを教える方が良いです。読者がファイルのアップロードについてより深く理解できるように、次の章でファイルのアップロードについて詳しく説明します。