使用Axios將Blob發送到服務器，接收到一個空對象

Question

我正在嘗試使用React與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' }

我確實在服務器上正確接收到它。

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值。