fetch、multer、expressを使用してblobデータをノードに送信

Question

ノードサーバーにBLOBオブジェクトを送信しようとしています。クライアント側では、MediaRecorderを使用してオーディオを録音しています。そのファイルをサーバーに送信して処理します。

 saveButton.onclick = function(e, audio) { 
     var blobData = localStorage.getItem('recording'); 
     console.log(blobData); 

     var fd = new FormData(); 
     fd.append('upl', blobData, 'blobby.raw'); 

     fetch('/api/test', 
      { 
      method: 'post', 
      body: fd 
      }) 
     .then(function(response) { 
      console.log('done'); 
      return response; 
     }) 
     .catch(function(err){ 
      console.log(err); 
     }); 

     } 

これはmulterを使用して、私の急行路線、次のとおりです。

var upload = multer({ dest: __dirname + '/../public/uploads/' }); 
    var type = upload.single('upl'); 
    app.post('/api/test', type, function (req, res) { 
    console.log(req.body); 
    console.log(req.file); 
    // do stuff with file 
    }); 

しかし、私のログは何も返さない：

{ upl: '' } 
undefined 

は、任意のヘルプは感謝ので、この上で長い時間を過ごして下さい！

Answer 1

私はちょうど上記の例の最小構成を実行することができ、それは私のために正常に働いた。

サーバー：publicで

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

app.use(express.static('public')); // for serving the HTML file 

var upload = multer({ dest: __dirname + '/public/uploads/' }); 
var type = upload.single('upl'); 

app.post('/api/test', type, function (req, res) { 
    console.log(req.body); 
    console.log(req.file); 
    // do stuff with file 
}); 

app.listen(3000); 

HTMLファイル：

<script> 
var myBlob = new Blob(["This is my blob content"], {type : "text/plain"}); 
console.log(myBlob); 

// here unnecessary - just for testing if it can be read from local storage 
localStorage.myfile = myBlob; 

var fd = new FormData(); 
fd.append('upl', localStorage.myfile, 'blobby.txt'); 

fetch('/api/test', 
{ 
    method: 'post', 
    body: fd 
}); 
</script> 

console.log(myBlob);フロントエンドにはを印刷しています。バックエンドは次のように印刷しています。

{} 
{ fieldname: 'upl', 
    originalname: 'blobby.txt', 
    encoding: '7bit', 
    mimetype: 'text/plain', 
    destination: '/var/www/test/public/uploads/', 
    filename: 'dc56f94d7ae90853021ab7d2931ad636', 
    path: '/var/www/test/public/uploads/dc56f94d7ae90853021ab7d2931ad636', 
    size: 23 } 

この例では、デバッグのためにハードコードされたBlobを試してみることもできます。