web-dev-qa-db-ja.com

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

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

      }

これは、マルターを使用する私の急行ルートです。

  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

これに長い時間を費やしてきたので、どんな助けにも感謝します！

javascriptnode.jsexpressfetchmulter
12
darkace

上記の例の最小構成を実行できただけで、問題なく動作しました。

サーバ：

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

public内の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);が_Blob {size: 23, type: "text/plain"}_を出力しています。バックエンドは印刷中です：

_{}
{ 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で試してみることもできます。

18
Michael Troger