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

Question

我有一个网页，用户使用html的“ input type = file”标签上传视频文件，我在JavaScript函数变量中捕获了该上传的视频文件，该文件以blob URL的形式出现。 “ blob： 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); });