将音频 blob 转换为文件以上传到后端（不在本地保存）

Question

编辑：这里有几个小的typos/errors，现在已经更正，他们解决了一半的问题。另一半在接受的答案中。

...

我正在客户端录制麦克风音频 (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="test" 的新条目，但文件字段仍为空。我尝试发送文件 -URL (URL.createObjectURL(..)) 而不是 blob 本身，但它也不起作用。

我按照 strapi documentation 的说明进行操作，但它使用文件系统中的文件，而不是在浏览器中创建的 blob。

有什么提示吗？

编辑： 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"
    }
  }
}

Answer 1

文档实际上建议您将文件或 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));

Answer 2

显然在发送 formData 时不应在请求 headers 中包含 content-type。

将音频 blob 转换为文件以上传到后端（不在本地保存）

Converting audio blob to file for upload to backend (without saving it locally)

javascript

blob

vue.js

strapi

axios