備忘録

Windows,Linux,Mac,AWS,VMware,ネットワークなどの検証

Expressにファイルをアップロードする

Node.js のExpressフレームワークを使用します。
Expressにファイルをアップロードできるようにします。

環境

Node.js: ver.8.9.3
Express ver.4.16.2

仕様

画像ファイル(PNGファイル)をサーバアップロードして、ブラウザに表示します。
アップロードディレクトリ: ./upload

アップロードされたファイルを受け取るために、multer モジュールをインストール

GitHub - expressjs/multer: Node.js middleware for handling `multipart/form-data`.

$ npm install --save multer

multer 使い方

こちらも参照

qiita.com

※アップロードディレクトリの絶対値を得るために、pathモジュールも使用しています。
 pathモジュールはnode.jsに含まれています。

const multer = require('multer');
const path = require('path');

// uploadディレクトリを、絶対値表記にする  
const upDir = path.join(__dirname, 'upload'); 

// アップロードディレクトリを設定したmulterモジュール  
const uploadDir = multer({dest: upDir}); 

// HTMLファイル側はフォームでアップロードファイルを選択させます
app.get('/', (req, res) => { 
  res.send(
    '<form method="POST" action="/" enctype="multipart/form-data">' +
      '<input type="file" name="upFile" /><br />' +
      '<input type="submit" value="アップロード" />' +
    '</form>'
  );
});

// Express 受信側
app.post('/', uploadDir.single('upFile'), (req, res) => {
  console.log('アップロードしたファイル名: ' + req.file.originalname);
  console.log('保存されたパス:' + req.file.path);
  console.log('保存されたファイル名: ' + req.file.filename);
});

// オリジナルファイル名: 01.png
// 保存されたパス:/home/hogehoge/upload/481c85bbac08dcff8a82951bd8adca4e 
 ※サーバ内では別のファイル名で保存される
// 保存されたファイル名: 481c85bbac08dcff8a82951bd8adca4e