2

multerファイルをサーバーにアップロードするために使用しています。ドキュメントに実際に記載されている 1 つの問題を除いて、すべて正常に動作しmulterます。ここに抜粋があります:

「まだ完全に取り込まれていない可能性があることに注意してくださいreq.body」(ストレージオブジェクトファイル名関数が呼び出されたときを意味します...)。「クライアントがフィールドとファイルをサーバーに送信する順序に依存します」

これがまさに私の問題です。req.body.IDがサーバーに到達することを確認しましたmulterが、ファイルの名前を定義した後にデータが入力されます。

この問題に対処する方法について何か提案はありますか? これが私のコードスニペットです(ファイル名は正しいjpg拡張子を持つ「未定義」になります):

//Storage object
var storage = multer.diskStorage({
  destination: './uploaded',
  filename: function(req, res, cb) {
    cb(null, req.body.ID + '.jpg')
  }
});

//File Upload Handle
router.post('/file-upload', upload.single('image'), function(req, res, next) {
  console.log("routes module-/file-upload " + req.body.ID); // The file ID gets transmitted
  res.sendStatus(201);
});

ここに私のHTMLがあります:

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

    <div class="form-group">
        <input id='name' name="name" placeholder="ID" class="form-control-label">
    </div>

    <div class="form-group" align="center">
        <input type="file" id="file" name="image"> 
    </div>

<button type="submit" class="btn btn-warning"  value="Upload">Upload</button>

</form> 

およびフロントエンド AJAX:

//Testing Files Uploads
$("#fileForm").on('submit', function(event) {
  event.preventDefault();
  var formData = new FormData(this);
  var fileID = $('#name').val();
  formData.append("ID", fileID);

  $.ajax('/file-upload', {
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
    })
    .done(function(item) {
      console.log('Uploaded!');
    })
    .error(function() {
      console.log('doesnt work!')
    });
});

//End of Files Uploads
4

2 に答える 2