因此我遇到了将音频(在浏览器中创建)发送到后端以存储在数据库中的问题。 我在前端使用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)));
}
假设您正在发送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
编码的请求