用axios发送Blob到服务器，接收一个空对象答案

【问题标题】：Send Blob to server with Axios, receiving an empty object用axios发送Blob到服务器，接收一个空对象
【发布时间】：2019-12-31 10:48:18
【问题描述】：

我正在尝试将音频作为 React with Typescript 中的 Blob 对象发送到带有 Axios 的服务器。我一直在尝试很多方法，但我总是在节点服务器上得到一个 emty 对象。

正如我所见，现在我已经掌握了正确的方法。但仍然得到一个空对象。

const config = {
    headers: {
      'Content-Type': 'multipart/form-data; boundary=${data._boundary}'
    }
  };

  try {
    var formData: FormData = new FormData();
    formData.append('audio', audioBlob);

    const res = await axios.post('/api/recording', formData, config);
    console.log(res);
  } catch (err) {
    console.log(err.response.data.errors);
  }

如果我这样做了

'Content-Type': 'application/json'

并发送一个普通的json例如

{ test: 'test' }

我确实在服务器上正确接收到它。

【问题讨论】：

你如何尝试在你的节点中获取表单数据？
我只是在打印 console.log(req.body) 我得到 {}

标签： javascript node.js typescript axios blob

【解决方案1】：

当您在multipart 中发送数据时，您需要监听data 事件以获取正文数据。如果我将{foo: bar} 作为数据发送，我可以得到它：

app.use ( '/foo', ( req, res ) => {    
    req.on ( 'data', ( data ) => {
        console.log ( data.toString () );
    } );

    req.on('end', () => {
        res.send('ok');
    });
} );

但是，这会给你这样的东西：

----------------------------807095611705406533847525
Content-Disposition: form-data; name="foo"

bar
----------------------------807095611705406533847525--

这将很难解析。所以为了简化解析，你可以使用multer。这将为您提供 req.body 对象中的数据。

let multer           = require ( 'multer' );
let processMultipart = multer ( { storage : multer.memoryStorage () } );

app.use ( '/foo', processMultipart.array ( "foo" ), ( req, res ) => {
    console.log ( req.body );
    res.send ( "ok" );
} );

这将为您提供[Object: null prototype] { foo: 'bar' }的输出，您可以访问req.body.foo的值。

【讨论】：