Javascript 使用fetch、multer、express将blob数据发送到节点
正在尝试将blob对象发送到我的节点服务器。在客户端,我正在使用MediaRecorder录制一些音频,然后我想将文件发送到服务器进行处理Javascript 使用fetch、multer、express将blob数据发送到节点,javascript,node.js,express,fetch,multer,Javascript,Node.js,Express,Fetch,Multer,正在尝试将blob对象发送到我的节点服务器。在客户端,我正在使用MediaRecorder录制一些音频,然后我想将文件发送到服务器进行处理 saveButton.onclick = function(e, audio) { var blobData = localStorage.getItem('recording'); console.log(blobData); var fd = new FormData(); f
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
我已经花了很长时间在这上面了,所以任何帮助都很感激 我刚刚能够运行上述示例的最低配置,对我来说效果很好 服务器:
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>
为了调试的目的,也可以使用本例中的硬编码Blob进行尝试。multer的一部分
var upload=multer({dest:u dirname+'/../public/uploads/'});var type=upload.single('upl')
如果您尝试只发送一个常规字符串而不是blobData
,您会得到什么信息?console.log(blobData)
告诉您什么。如果您从浏览器的web开发工具查看获取网络请求,浏览器会发送什么内容类型
头?更改为字符串后,它仍然输出:{upl:'}
blobData是一个对象Blob{size:6937,type:“audio/wav”}size:6937 type:“audio/wav”\uuuuuuu proto\uuuuuo:Blob
我试过硬编码的大blobe,效果很好!谢谢
{}
{ 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 }