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

Question

编辑：这里有几个小的打字错误，现在已经更正了，解决了一半的问题。另一半在公认的答案中。

...

我在客户端（nuxt/vue）录制麦克风音频，并希望将其发送到我的后端（Strapi）。我有一个媒体记录器，当记录停止时，数据被添加到我的记录文件数组。这部分工作，录音后我可以用嵌入式播放器播放。

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后端时遇到问题。我想原因是我试图上传一个blob，而Strapi需要一个文件。

  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（..）而不是水滴本身，但它也不起作用。

我遵循strapi留档的说明，但它使用文件系统中的文件，而不是在浏览器中创建的Blob。

有什么提示吗？

编辑：录音。设置。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));