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

概要

画像のアップロードは Web 開発で頻繁に使用される機能であり、ノード コミュニティもこの点に関して比較的完全なサポートを提供しています。

一般的に使用されるオープン ソース コンポーネントには、multer、formidable などが含まれます。これら 2 つのオープン ソース コンポーネントの助けを借りて、画像のアップロードを簡単に実行できます。

この記事では主に以下の内容について説明し、後続の章で技術的な実装の詳細を掘り下げていきます。

基本的な例: Express と Multer を使用して、単一または複数の画像をアップロードします。

よく使用される API: アップロードされた画像に関する情報を取得します。

高度な使用法: 保存された画像のパスと名前をカスタマイズします。

環境の初期化

は非常に簡単で、たった 1 行のコマンドです。

npm install express multer multer --save

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

➜ upload-custom-filename git:(master) ✗ tree -L 1
.
├── app.js # 服务端代码，用来处理文件上传请求
├── 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。

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

サービスを実行します。

node app.js

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

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

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

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.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);

form.html。

<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>

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

アップロードされた写真に関する情報を取得する

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

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

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

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){
  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);

form.html。

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

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

ファイルタイプ:image/png
元のファイル名:1.png
ファイルサイズ:18379
ファイル保存パス:upload/b7e4bb22375695d92689e45b551873d9

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

場合によっては、ファイルのアップロードをカスタマイズしたいことがありますパス、名前、マルチターも簡単に実装できます。

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

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

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

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

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

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

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

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

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

app.js。

var fs = require('fs');
var express = require('express');
var multer = require('multer')
 
var app = express();
 
var createFolder = function(folder){
  try{
    fs.accessSync(folder);
  }catch(e){
    fs.mkdirSync(folder);
  }
};
 
var uploadFolder = './upload/';
 
createFolder(uploadFolder);
 
// 通过 filename 属性定制
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadFolder);  // 保存的路径，备注：需要自己创建
  },
  filename: function (req, file, cb) {
    // 将保存文件名设置为 字段名 + 时间戳，比如 logo-1478521468943
    cb(null, file.fieldname + '-' + Date.now());
  }
});
 
// 通过 storage 选项来对 上传行为 进行定制化
var upload = multer({ storage: storage })
 
// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
  var file = req.file;
  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。

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

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

後ろに書いてあります

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