Envoyer des données blob nœud à l'aide de fetch, multer, express
Essaie d'envoyer un objet blob de mon nœud de serveur. Sur le côté client, je suis d'enregistrement de l'audio à l'aide de MediaRecorder et puis je veux envoyer le fichier sur mon serveur pour traitement.
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);
});
}
C'est ma voie expresse, qui utilise 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
});
Mais mon des journaux renvoie rien:
{ upl: '' }
undefined
Été passé un long moment sur cette sorte que toute aide appréciée!
- Une partie de multer
var upload = multer({ dest: __dirname + '/../public/uploads/' }); var type = upload.single('upl');
- Pensez-vous obtenir quelque chose si vous essayez d'envoyer juste un string au lieu d'
blobData
, et ce qui ne l'console.log(blobData)
vous dire. - Ce
Content-Type
d'en-tête ne le navigateur envoyer si vous affichez le fetch network demande à partir de votre navigateur web, outils de dev? - après avoir changé de chaîne, il encore sorties:
{ upl: '' }
- blobData est un objet
Blob {size: 6937, type: "audio/wav"} size : 6937 type : "audio/wav" __proto__ : Blob
- En général, vous obtiendrez des chaînes de retour de localStorage, mais clairement la récupération ou ajouter est de ne pas en
- Sous en-têtes de requête-je obtenir
content-type:multipart/form-data; boundary=----WebKitFormBoundaryuXIvVIjDViONFgyd
- Demande de charge utile:
------WebKitFormBoundaryuXIvVIjDViONFgyd Content-Disposition: form-data; name="upl" ------WebKitFormBoundaryuXIvVIjDViONFgyd--
- Peut-être que je devrais être en utilisant une autre méthode? J'ai multer de travail normal d'un formulaire HTML post avec manuellement les fichiers téléchargés plutôt qu'à la volée enregistrement
- Vous pourriez essayer d'ajouter des en-têtes: { "Content-type": "multipart/form-data" } à votre options d'extraction
- Ne fait aucune différence @MichaelTroger
Vous devez vous connecter pour publier un commentaire.
J'étais juste capable de courir un minimum de configuration de votre exemple ci-dessus et il a bien fonctionné pour moi.
Serveur:
Fichier HTML dans
public
:La
console.log(myBlob);
sur le frontend est l'impressionBlob {size: 23, type: "text/plain"}
. Le backend est en cours d'impression:Peut-être aussi essayer avec un codées en dur Blob comme dans cet exemple à des fins de débogage.