0

我在通过 xhr.send(Blob) 上传 blob 时遇到了一些麻烦。我有一个网站，用户通过 getUserMedia() 创建视频，该视频通过 blob 放置在我的网站内，他们可以录制多次，直到他们对视频结果感到满意为止。我希望他们让用户能够将视频上传到服务器，而无需他们下载文件然后使用表单上传视频。所以我设法通过 xhr.send 做到了这一点

function sendXHR(){
var xhr = new XMLHttpRequest();
var video=$("#myexportingvideo");
xhr.open('GET', video.src , true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    // Note: .response instead of .responseText
    var blob = new Blob([this.response], {type: 'video/webm'});
    console.log(blob.size/1024);
    console.log(blob.type);

    form = new FormData(),
    request = new XMLHttpRequest();
    form.append("myblob",blob,"Capture.webm");
    request.open(
                "POST",
                "../TryExtension/upload_file.php",
                true
            );
    //request.send(blob);
    request.send(form);
  }
};
xhr.send();
}

问题是，当 blob 的大小大约大于 1.8 MB 时，发送的数据为 0，所以基本上我的问题是，blob 大小是否有限制，或者我必须将 blob 分块发送到服务器？该问题的一个示例如下。

控制台日志

   frames captured: 32 => 1.077s video vid.js:155
   XHR finished loading: "blob:http%3A//localhost/19d162ae-c22e-48af-a83d-2ddd579ffff9". vid.js:240
   1199.46484375 vid.js:225
   video/webm vid.js:226
   XHR finished loading: "http://localhost/TryExtension/upload_file.php". vid.js:237
   frames captured: 91 => 3.052s video vid.js:155
   XHR finished loading: "blob:http%3A//localhost/c7d4f3c6-88c8-43c5-9adb-b9060c93bfb3". vid.js:240
   3402.873046875 vid.js:225
   video/webm vid.js:226
   XHR finished loading: "http://localhost/TryExtension/upload_file.php".

第一个视频正确上传，但下一个视频上传的信息为 0 字节。提前感谢您的所有帮助。

4

0 回答 0