Wysyłaj dane blobu do węzła za pomocą narzędzia pobierania, multera, ekspresu

Question

Próbujesz wysłać obiekt blob do mojego serwera węzła. Po stronie klienta nagrywam trochę dźwięku za pomocą MediaRecorder, a następnie chcę wysłać plik na mój serwer w celu przetworzenia.

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

     } 

To jest moja droga ekspresowa, która wykorzystuje 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 
    }); 

Ale moje logi nic powrotu:

{ upl: '' } 
undefined 

spędzam dużo czasu na to, więc każda pomoc mile widziana!

Answer 1

Byłem w stanie uruchomić minimalną konfigurację powyższego przykładu i działało dobrze dla mnie.

Serwer:

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

plik HTML w public:

<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); na frontend drukuje . Backend drukuje:

{} 
{ 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 } 

Może też spróbować z twardego kodowane Blob jak w tym przykładzie dla celów debugowania.