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

Question

我正在尝试使用 Typescript 将音频作为 Blob 对象发送到使用 Axios 的服务器。我已经尝试了很多方法，但我总是在 Node 服务器上得到一个空对象。

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

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

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

Answer 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 访问该值。