node.js + multerで複数ファイルをアップロードしたい。

Question

node.jsとmulterで複数ファイルをアップロードしたいのですが、複数ファイルのファイル名それぞれに1,2,3のようなナンバリングをつけてアップロードをする実装方法がわかりません。素人質問で恐縮ですがお知恵を貸していただけたら幸いです。

アップロードは正常に出来るのですがファイル名の変え方がわからないため困っています。

var multer = require("multer");

var storage = multer.diskStorage({
    destination: function(req, file, cb){
      cb(null, `./public/${process.env.NODE_ENV}/images/cars`)
    },
    filename: function(req, file, cb){
      cb(null, file.originalname) //←複数ファイルを選択したときのここの実装方法がわかりません。
    }
  });

var upload = multer({storage: storage});

router.post("/regist/execute",upload.any(),(req,res)=>{

    var original = createRegistData(req);
    var errors = validateRegistData(req.body);
    console.log(original)
    if(errors){
        res.render("./posts/regist-form.ejs", { errors, original, MAKES, TYPES});
        return
    }
     
});

    <form enctype="multipart/form-data">
     

      <!--image -->
      <div class="form-group">
        <label>Make</label>
        <input type="file" class="form-control" id="image" name="image" multiple />
      </div>


      <!-- submit button -->
      <input type="submit" class="btn btn-primary" data-method="POST" data-action="/posts/regist/execute" value="Regist">
  </form>

【追記】

Answer 1

ファイル名の変え方

標準モジュールFileSystem で rename を検索してみてください。

fs.rename() や fs.renameSync()、fs.promises.rename() がファイル名更新用のメソッドとして提供されています。

追記）

cb(null, file.originalname) //←複数ファイルを選択したときのここの実装方法がわかりません。

multer.js DiskStorage のサンプルと続く解説を確認してみてください。

var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '/tmp/my-uploads')
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
cb(null, file.fieldname + '-' + uniqueSuffix)
}
})

サンプルではフィールド名 + 受信完了時刻(Date) + 乱数 をサフィックスとして生成して同一のファイル名になることを回避しています。

ご質問に関係ありそうな内容を翻訳し、括弧書きで私の解釈を加えてみました。

Google翻訳

• filename（オプション）は、フォルダー内でファイルの名前を決定するために使用されます。

ファイル名が指定されていない場合、各ファイルにはファイル拡張子を含まないランダムな名前が付けられます。注：Multerはファイル拡張子を追加しません。関数（cb）は、ファイル拡張子を含む完全なファイル名を返す必要があります。
（destination、filenameオプションに指定する）各関数には、（記録先ディレクトリやファイル名を）決定を支援するために、要求（req）とファイル（file）に関する情報の両方が渡されます。
req.bodyはまだ完全に入力されていない可能性があることに注意してください。
これは、クライアントがフィールドとファイルをサーバーに送信する順序によって異なります。

このサンプルを応用するなら、受信結果を確認できるように console.log() を仕込んで POSTをテストしながら命名方法を探ります。

Expressを稼働するターミナルにファイル名が出力されると思います。
**複数ファイルの場合、複数回表示されないか？**を確認してみてください。

filename: function(req, file, cb){
//  console.log( req );
//  console.log( req.files );
  console.log( file.originalname );

  const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
  cb(null, file.fieldname + '-' + uniqueSuffix)
}

Comments

[pyon_214]

とてもわかり易いご回答ありがとうございます。

現在私は簡単な自動車販売サイトを制作しておりまして、画像を複数登録した上でその画像名をMongoDBなどに保存しておきたいのですが、

ファイル名を
「req.body.maker + "-" + req.body.type + "-" +"1,2,3などの固有のナンバリング"'」

という形式にしたいと考えていて、固有のナンバリングの設定方法とreq.body.makerなどをファイル名に入れる方法がわからずに困っています。

具体的には、req.body.makerなどはMongoDBに登録することは出来るのですが、multerで登録する際のstorageのfilenameの段階ではundefinedになってしまいます。

この点について教えていただけると助かります。つたない文章で申し訳ございません。

[pyon_214]

追記に画像を追加しましたが、multer.diskStorage内でconsole.log(req.body)をしたところ、このようになります。

[pyon_214]

自分で試行錯誤を繰り返したところ、おそらくmulterのdiskStrageを設定している段階ではreq.bodyが情報を最後まで受け取っていないようで、フロントエンド側で画像を入力欄の一番下にしたところreq.body.makerなどをすべて受け取ることができました。

しかし、できれば画像のアップロード欄はフォームの上のほうに配置したいため解決する方法はございませんでしょうか？