带有 Blob URL 的 404 的 XMLHttpRequest 状态

Posted 2023-05-07

【中文标题】带有 Blob URL 的 404 的 XMLHttpRequest 状态

【英文标题】：XMLHttpRequest Status of 404 With Blob URL

【发布时间】：2015-02-26 17:29:10

【问题描述】：

我正在尝试将 getUserMedia 生成的 blob URL 上传到服务器。 Someone else wanted to do the same thing，这个问题已经得到解答。

我在 XHR 请求中使用的代码与回答该问题的人相同，但我得到的是 404。I made a fiddle，当您查看控制台时也会发生同样的事情。我有一个live example on my site as well，同样的事情也会发生。

这是需要一些 TLC 的代码：

function XHR()
var xhr = new XMLHttpRequest();
xhr.open('GET',record.src); //404 ???
xhr.responseType = 'blob';
xhr.onload = function(e) 
    if (this.status == 200)
        //do some stuff
        result.innerText = this.response;
    
;
xhr.send();

其他人似乎都能做到这一点，因为这已经讨论过了。

Exhibit A

Exhibit B

我使用的是 ChromeOS，41.0.2252.2 dev。到底发生了什么，为什么我不能得到 blob？

【问题讨论】：

您正在尝试使用 XMLHttpRequest 加载 blob？为什么？什么是斑点？

好吧，我在帖子正文中放置的第一个链接显示有人想将 getUserMedia BLOB 上传到服务器。这也是我想做的。

好吧，您的代码没有将其上传到服务器......您正在向该 src 发出请求......除非我读错了代码。另外，由于文件大小，您可能希望使用 POST 而不是 get。

我知道。但不能本末倒置。在我想上传到服务器之前，我需要知道为什么在尝试获取 BLOB URL 时会得到 404 状态。

我不确定。我看到的代码使用GET来检索BLOB的内容，然后POST上传到服务器。

【参考方案1】：

我几乎可以肯定 MediaStream 中的媒体没有保存在任何地方，只是在使用后被丢弃。 正在开发一个用于记录流的 API，MediaRecorder。 只有 Firefox 有这个最基本的实现，所以它还不能使用。 如果您在移动设备上实现此功能，则可以使用带有 capture 属性的文件输入。

<input type="file" accept="video/*" capture>

【讨论】：

但是我不明白。我帖子中的第一个链接呢？他们指的是什么浏览器？

我想补充的另一件事：它们似乎在使用后会被扔掉，但这没有任何意义。 BLOB URL 应该是“内存中的”。有点像虚假广告——只是扔掉而不是保留的 BLOB！

【参考方案2】：

function XHR()
var xhr = new XMLHttpRequest();
xhr.open("GET","record.src",true); // adding true will make it work asynchronously
xhr.responseType = 'blob';
xhr.onload = function(e) 
    if (this.status == 200)
        //do some stuff
        result.innerText = this.response;
    
;
xhr.send();

立即尝试！它应该工作。

【讨论】：

对不起，我花了这么长时间才回到这个问题。这仍然不起作用。老实说，我真的不明白为什么在它甚至不起作用之前就已经谈论过这个！

【参考方案3】：

看看这篇文章： html5 video recording and upload?

您缺少的是“blob”是什么的声明。这个人在 .onload function() 中做的第一件事是 var blob = new Blob([this.response], type: 'video/webm');