如何将blob url数据保存在目录中

Posted 2023-02-25

【中文标题】如何将blob url数据保存在目录中

【英文标题】：How to save blob url data in a directory

【发布时间】：2017-05-02 04:24:37

【问题描述】：

我正在处理录音。现在我想直接将录制的音频保存在我们的本地。当我录制音频时，它会返回 blob URL，例如：

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

当我点击此 URL 时，它会播放录制的音频。现在我将该 blob URL 从 js 发送到 php 脚本以保存您的本地目录，但它不起作用。

我该怎么做？

【问题讨论】：

如果你不发布你的代码并告诉我们什么是不工作的（javascript 不发送？php 不接收？文件不保存？保存但不可读？）

【参考方案1】：

Blob URL 生命周期链接到 document，它从 Blob 或 File 对象创建了 Blob URL。 Blob URL 不能发布到服务器作为存储在 snapshot state 的 Blob 的参考。见Blob URL Store。

您可以使用fetch()、Response.blob() 获取Blob 表示Blob URL，将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));

【讨论】：

以上代码给出以下错误-TypeError: HEAD or GET Request cannot have a body.

查看更新后的帖子。在第二个参数传递的init 对象处将method 设置为"POST"。见developer.mozilla.org/en-US/docs/Web/API/…

在 PHP 脚本中我得到 $__FILES 元素。对于上传，我使用以下代码。但它只是保存名为 blob 的文件，而不是音频文件。定义（'UPLOAD_DIR'，'上传/'）； if($_FILES['fileName']) $target_path = UPLOAD_DIR . basename($_FILES['fileName']['name']); if(move_uploaded_file($_FILES['fileName']['tmp_name'], $target_path)) echo "文件".基本名称（$_FILES['fileName']['name']）。 “已上传”； else echo "上传文件出错，请重试！";如何在这里获取音频文件？

尝试将包含扩展名的文件名设置为FormData.prototype.append()fd.append("fileName", blob, "audio.ogg"); // or appropriate .ext for MIME type of file

对编辑表示歉意！发错帖子了：o 请编辑回来我在国外用我的手机很抱歉！