将音频blob转换为上传到后台的文件(不在本地保存)
提问于 2020-10-08 05:36:14
编辑:这里有几个小的打字错误/错误，现在已经更正了，他们解决了一半的问题。另一半在公认的答案中。
..。
我正在客户端录制麦克风音频(nuxt/vue)，并希望将其发送到我的后端(Strapi)。我有一个MediaRecorder记录器，当记录停止时，数据将被添加到我的recordingFile数组中。这部分工作，在录制后，我可以播放它与嵌入式播放器。
HTML部件：
<audio
id="localaudio"
..
></audio>JS：
recorder = new MediaRecorder(mediaStream);
...
recorder.addEventListener("dataavailable", function(e) {
document.querySelector("#localaudio").src = URL.createObjectURL(e.data); //add it to the player element on the page for playback
recordingFile.push(e.data); // pushing to array recordingFile
});然而，我在上传到我的Strapi后端时遇到了麻烦。我认为原因是当Strapi需要一个文件时，我正在尝试上传一个blob。
let blob = new Blob(recordingFile, { type: "audio/ogg" });
const data = {
"user" : "test",
"files.File" : blob //prefix is strapi convention
};
const formData = new FormData();
formData.append('data', JSON.stringify(data));
axios({
method: "post",
url: "http://localhost:1337/recordings",
data: formData,
headers: {
"content-type": `multipart/form-data;`
}
})我确实得到了一个肯定的响应和一个带有测试“user=”的新条目，但文件字段仍然为空。我尝试发送文件URL (URL.createObjectURL(..))而不是斑点本身，但它也不起作用。
我正在遵循strapi documentation的说明，但它使用的是文件系统中的文件，而不是在浏览器中创建的blobs。
有什么提示吗？
编辑: recording.settings.json：
{
"kind": "collectionType",
"collectionName": "recordings",
"info": {
"name": "Recording"
},
"options": {
"increments": true,
"timestamps": true,
"draftAndPublish": true
},
"attributes": {
"File": {
"model": "file",
"via": "related",
"allowedTypes": [
"images",
"files",
"videos"
],
"plugin": "upload",
"required": false
},
"name": {
"type": "string"
}
}
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-08 05:52:48
文档实际上建议您将文件或blob (两者都可以使用)附加到FormData实例，而不是data对象。
let blob = new Blob(recordingFile, { type: "audio/ogg" });
let file = new File([blob], 'recording.ogg');
const data = {
"user" : "test",
};
const formData = new FormData();
formData.append('files.file', file);
formData.append('data', JSON.stringify(data));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64256382
复制相关文章
腾讯云开发者
