无法保存/下载浏览器 blob 数据对象

Question

我有一个网页，用户使用 html 的“输入类型 = 文件”标签上传视频文件，我在 JavaScript 函数变量中捕获上传的视频文件，它作为 blob URL 出现。 “斑点：https://www.myownsite.com:8080/2e8cfd32-abf2-4db3-b396-91f76cc3b40c”。我无法在我的系统中保存此 blob URL。

HTML 代码：

<input type="file" name="video_file_name" accept="video/*">
<input type="submit" value="Upload Video" id="customVideoSubmit">
<button onClick="postVideo();" id="customVideoSubmit" aria- hidden="true">Upload Video</button>

JavaScript 代码：

    function postVideo(){
    var blobURL = document.querySelector('video').src;
}

变量 blobURL 包含以下 blob URL，如果我将其放在该浏览器的单独选项卡上，它将正确播放视频。

blob:https://www.myownsite.com:8080/2e8cfd32-abf2-4db3-b396-91f76cc3b40c

如何将这个 blob 视频文件保存在我的系统中。我已经在我的 Perl 代码中尝试了许多 JavaScript 方法和后端方法，例如

decode_base64($cgi->{blobURL}) ;

但没有任何效果。任何帮助将不胜感激。

Answer 1

要将Blob URL 转换为Blob 到POST 到服务器，您可以使用fetch() 和Response.blob()

const blobURL = URL.createObjectURL(new Blob([123]));
fetch(blobURL)
.then(response => response.blob())
.then(blob => {
  // do stuff with `blob`: `Blob`
  console.log(blob);
});