'调试连接已关闭。原因:渲染过程消失了。尝试使用FileReader上传大/多个文件时

时间:2018-01-31 08:06:20

标签: javascript html5 angular typescript xmlhttprequest

我想上传一些文件。如果文件小于1gb,请完全上传。  如果文件大于1gb,请将其上传为每个最大1gb的段。  我的代码在小文件上正常工作,但是当我尝试上传更大的文件时,浏览器崩溃了。错误“调试连接已关闭。原因:渲染过程已消失。”  我正在测试的文件是4.3 GB,并将启动5 XHR请求。

我做错了什么?

let count = 0;
  for (let url of this.urls) {
            var start = 0 + (idx * 1000000000);

    var stop = 0;
    if (this.urls.length === 1)
      stop = files[0].size;
    else if (this.urls[this.urls.length - 1] == url)
      stop = start + (files[0].size % 1000000000);
    else
      stop = start + 1000000000;

    var reader = new FileReader();
    // If we use onloadend, we need to check the readyState.
    reader.onloadend = (event) => {
      if (reader.readyState === 2) {
        this._httpService.xhrBlobPut(url, reader.result).subscribe(result => {
          count += 1;
          if (count == this.urls.length) {
            this._storageService.postFile(this.appId, this.fileId, payload).subscribe(result => {
            });
          }
        });
      }
    };
    var blob = files[0].slice(start, stop + 1);

    reader.readAsArrayBuffer(blob);
    this.isUploaded = true;
    idx += 1;
  }



xhrBlobPut(url: string, body: any): Observable<any> {
    return Observable.fromPromise(new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 201) {
              resolve(xhr.response)
            } else {
              reject(xhr.response)
            }
          }
        }
        xhr.open("PUT", url);
        xhr.send(body);
    }));
}

0 个答案:

没有答案