从React前端向Express后端发送音频Blob数据

Question

我在将浏览器中创建的音频发送到后端进行存储时遇到了问题。我在前端使用React，在Web Audio API上允许用户创建音频。但是，当我发送音频时，后端只接收到一个空对象。有没有人知道如何使数据持久化以便于稍后播放并存储在数据库中？

mediaRecorderOnStop() {
    console.log("data available after MediaRecorder.stop() called.");
    const clipName = prompt('Enter a name for your sound clip?', 'My unnamed clip')

    //creating new blob object
    const blob = new Blob(this.state.chunks, { 'type': 'audio/ogg; codecs=opus' });

    //sending data to the backend
    uploadDocumentRequest(this.props.createClip(blob, clipName))

    this.setState({
        chunks: []
    })
    console.log("recorder stopped");
}

//makes a api post request to server
export function uploadDocumentRequest(data) {
    axios.post('/api/createAudio', data)
        .then(response => console.log(uploadSuccess(response)))
        .catch(error => console.log(uploadFail(error)));

这是我的代码图片：https://istack.dev59.com/TNmEP.webp

- Sether's

---

请将您的代码粘贴为文本。 - TGrif

Answer 1

假设您正在发送JSON，您将无法将二进制数据发送到服务器。

您必须使用 multipart/formdata 对您的数据进行编码。

为此，您应该构造一个FormData对象，稍后可以通过XHR或Fetch API发送。

  var fd = new FormData();
  var fd.append('audio', blob);

  fetch(apiUrl + '/api/createAudio', {
    headers: { Accept: "application/json" },
    method: "POST", body: fd
  });

请求头Content-Type: multipart/formdata将会自动设置。

您需要确保您的Web应用程序能够处理multipart/formadata编码的请求。

- user2216455

---

谢谢回复，这非常有帮助！ - Sether's