如何将 Blob URL 数据保存到目录中

Question

我正在处理音频记录。现在我想将录制的音频保存到我们的本地文件夹中。当我录制音频时，它会返回blob URL，例如：

blob: http://example.com/7737-4454545-545445.

当我访问此URL时，它会播放录制的音频。现在我正在将该blob URL从js发送到PHP脚本以保存到本地目录，但是它无法正常工作。

我该怎么办？

- RAC B

---

如果您不发布代码并告诉我们具体出了什么问题（JavaScript没有发送？php没有接收？文件没有保存？保存但无法读取？），那么这将不会有任何帮助。 - Nick Li

Answer 1

的生命周期与创建 或 对象的 相关联。不能将 作为指向 snapshot state 存储的 的引用发送到服务器。请参见 Blob URL Store。

您可以使用 fetch()、Response.blob() 来获取 的 表示，将 FormData 发送到服务器。

// `blobURL` : `"blob:http://example.com/7737-4454545-545445"`
fetch(blobUrl).then(response => response.blob())
.then(blob => { 
  const fd = new FormData();
  fd.append("fileName", blob, "file.ext"); // where `.ext` matches file `MIME` type  
  return fetch("/path/to/server", {method:"POST", body:fd})
})
.then(response => response.ok)
.then(res => console.log(res))
.catch(err => console.log(err));

- guest271314

---

以上代码出现以下错误- TypeError: HEAD或GET请求不能有主体。 - RAC B

请参考更新的帖子。在传递给第二个参数的init对象中将method设置为"POST"。请查看https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch。 - guest271314

在PHP脚本中，我获取了$__FILES元素。对于上传，我使用以下代码。但是，它并没有保存音频文件，而是简单地保存了名为blob的文件。define('UPLOAD_DIR', 'uploads/'); if ($_FILES['fileName']) { $target_path = UPLOAD_DIR . basename($_FILES['fileName']['name']);if (move_uploaded_file($_FILES['fileName']['tmp_name'], $target_path)) { echo "文件" . basename($_FILES['fileName']['name']) . "已上传"; } else { echo "上传文件时出错，请重试！";如何在这里获取音频文件？ - RAC B

尝试在FormData.prototype.append()的第三个参数中设置包括扩展名的文件名。例如：fd.append("fileName", blob, "audio.ogg"); // 或者根据文件的MIME类型选择适当的扩展名。 - guest271314

非常抱歉修改了错误的帖子:o请恢复原样，我正在国外使用手机，对此表示抱歉！ - Dominic