将音频 Blob 数据从 React 前端发送到 Express 后端答案

【问题标题】：Sending Audio Blob data from a React frontend to a Express backend将音频 Blob 数据从 React 前端发送到 Express 后端
【发布时间】：2018-02-01 02:34:34
【问题描述】：

所以我遇到了将音频（在浏览器中创建）发送到我的后端以存储在数据库中的问题。我在前端使用 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)));

}

Here is an image of my code

【问题讨论】：

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

标签： node.js reactjs express audio web-audio-api

【解决方案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标头

您必须确保您的网络应用能够处理multipart/formadata 编码请求

【讨论】：

感谢您的回复，这非常有帮助！