使用fetch、multer和express将blob数据发送到node

Question

我正在尝试将一个blob对象发送到我的Node.js服务器。在客户端，我使用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);
        });

      }

这是我的 Express 路由，使用了 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

已经花费很长时间在这上面，所以任何帮助都将不胜感激！

- darkace

---

multer 的一部分var upload = multer({ dest: __dirname + '/../public/uploads/' }); var type = upload.single('upl'); - darkace

blobData是一个对象Blob {size: 6937, type: "audio/wav"} size : 6937 type : "audio/wav" __proto__ : Blob - darkace

在请求头中，我得到了content-type:multipart/form-data; boundary=----WebKitFormBoundaryuXIvVIjDViONFgyd。 - darkace

请求有效载荷：`------WebKitFormBoundaryuXIvVIjDViONFgyd Content-Disposition: form-data; name="upl"------WebKitFormBoundaryuXIvVIjDViONFgyd--` - darkace

没有任何区别 @MichaelTroger - darkace

Answer 1

我刚刚成功地运行了你上面的例子的最小配置，并且它对我来说运行得很好。

服务器：

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。

- Michael Troger

---

我尝试使用硬编码巨大的块，它像魔法一样运行良好！谢谢 - Al2x

我正在尝试使用canvas.toBlob来尝试相同的代码，并将blob作为参数传递给回调函数，但是在服务器上没有得到任何东西 - undefined

Answer 2

你不需要使用 multer。只需在 app.post() 中使用 express.raw() 即可。

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

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

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

app.listen(3000);

- Cesar Morillas