Eri*_*c.M 16 javascript upload google-chrome blob multipartform-data
我只在谷歌Chrome和Chromium上遇到了一个非常奇怪的问题.
背景是:
我使用多部分上传方法将文件上传到我的服务器,这意味着我将文件分成10mb的块并将每个块发送到服务器.这在所有具有任何大小的文件的浏览器中都可以完美地工作,当我需要加密每个块时问题就开始了.
对于加密我使用CryptoJS,并且在上传块之前,我加密它并获得结果Blob上传,当我必须上传少于50个块(50个blob,总共约500mb)时,这在Chrome上正常工作,之后我得到a POST http://(...) net::ERR_FILE_NOT_FOUND.
奇怪的是,这适用于所有其他浏览器,包括Opera,现在基本上是Chrome,除了Chrome和Chromium.我在IE,Firefox,Edge,Safari,Opera,Chrome和Chromium上测试过它.
下面你可以看到我的代码如何工作所以你们可以有一个想法,这不是我在应用程序中使用的真实代码,而是,它是我编写的测试代码产生相同的结果.
而不是获取文件的片段(File.slice)我将作为一个块上传并加密它以获得它blob,我将生成一个伪造blob我的块的大小.我用它setTimeout来模拟加密blob所需的时间.就像我之前说的那样,通过这样做,我得到了与我的真实代码相同的结果:
function uploadNext(prevResponse) {  
    if (currentPart == totalPartsFile)
        return;
    //var chunk = getNextChunk();
    var totalSize = file.size;
    setTimeout(function() {
        var blob = new Blob([new ArrayBuffer(constants.chunkSize)], {
            type: 'application/octet-string',
            name: file.name
        });
        console.log(blob);
        blob.encrypted = true;
        blob.key = encryptionKey;
        blob.mimeType = file.mimeType;
        blob.name = file.name;
        blob.originalFileSize = originalFileSize || file.size;
        uploadFile(objectId, currentPart, blob, totalSize, prevResponse, function(resp) {
            uploadNext(resp);
        });
    }, 1000);
}
所以,上面的代码是生成我的blob的地方,下面是上传部分:
function uploadFile (objectId, index, blob, totalSize, prevResponse, callback) {
    var format = "encrypted";
    var params = "?format=" + format + (format === "encrypted" ? "&encoding=base64" : "");
    var endPoint = constants.contentServiceUrl + resourceService.availableResources.addContents.link.split(':objectId').join(objectId) + params;
    var formData = new FormData();
    formData.append("totalFileSizeBytes", totalSize);
    formData.append("partIndex", index);
    formData.append("partByteOffset", previousOffset);
    formData.append("chunkSize", blob.size);
    formData.append("totalParts", totalPartsFile);
    formData.append("filename", blob.name);
    if (currentPart != 0) {
        formData.append("uploadId", prevResponse.uploadId);
        formData.append("bucket", prevResponse.bucket);
    }
    if (finalChunk) {
        for (var key in etags1) {
            formData.append("etags[" + key + "]", etags1[key]);
        }
    }
    formData.append("data", blob);
    previousOffset += blob.size;
    var request = {
        method: 'POST',
        url: endPoint,
        data: formData,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }
    $http(request)
        .success(function(d) {
            _.extend(etags1, d.etags);
            console.log(d);
            callback(d);
        })
        .error(function(d) {
        console.log(d);
    });                                                
}
当然还有其他支持变量和代码我没有放在这里,但这足以让我们知道我们正在处理什么.
在这个例子中,我使用的是AngularJS $http模块,但我也试过纯粹的XMLHttpRequest,我得到了相同的结果.
就像我说的那样,我只能获得POST http://(...) net::ERR_FILE_NOT_FOUND大于499mb(50+块)的文件,并且只能在Chrome中使用.
我在这里发布这个,因为我一直在寻找解决方案,但我找不到任何与此问题有关的内容,我在互联网上发现的最接近的事情是Chromium项目论坛中的这个问题:
https://code.google.com/p/chromium/issues/detail?id=375297
在这一点上,我真的不知道该怎么办,所以我想知道过去是否有人遇到过类似的问题并且能以某种方式修复它.
提前谢谢你的答案.
小智 -1
看来是 Firebug 插件的问题。尝试禁用它。这个对我有用。
火狐浏览器。当我按块加载文件时遇到问题。我禁用了插件并且没有出现内存泄漏。也许它会对你有帮助
对于 Chrome 来说一切正常。
| 归档时间: | 
 | 
| 查看次数: | 1760 次 | 
| 最近记录: |