example - file to blob javascript

Cargar blobs como carga multiparte causa net:: ERR_FILE_NOT_FOUND en Chrome después de 500 mb

Question

Tengo un problema realmente extraño solo en Google Chrome y Chromium.

El fondo es:

Subo archivos a mi servidor utilizando el método de carga de varias partes, lo que significa que los particiono en trozos de 10 mb y que envío cada trozo al servidor. Esto funciona perfectamente en todos los navegadores con archivos de cualquier tamaño, el problema comenzó cuando necesitaba cifrar cada fragmento.

Para el cifrado, uso CryptoJS y, antes de cargar el fragmento, lo cifro y obtengo el Blob resultante para cargar, esto funciona bien en Chrome cuando tengo que cargar menos de 50 fragmentos (50 blobs, alrededor de 500 mb en total), después de eso obtenga un POST http://(...) net::ERR_FILE_NOT_FOUND .

Extrañamente, esto funciona en todos los demás navegadores, incluyendo Opera, que es básicamente Chrome hoy en día, excepto Chrome y Chromium. Lo probé en IE, Firefox, Edge, Safari, Opera, Chrome y Chromium.

A continuación, puede ver cómo funciona mi código para que puedan tener una idea. Este no es el código real que uso en la aplicación, sino que es un código de prueba que escribí que produce el mismo resultado.

En lugar de obtener una porción ( File.slice ) del archivo que voy a cargar como un trozo y cifrarlo para obtener el blob , voy a generar un blob falso con el tamaño de mi trozo. setTimeout el setTimeout para simular el tiempo que lleva cifrar un blob. Como dije antes, obtengo el mismo resultado que mi código real al hacer esto:

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);
}

Entonces, el código de arriba es donde se genera mi blob, debajo está la parte de carga:

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);
    });                                                
}

Por supuesto, hay otras variables de apoyo y código que no puse aquí, pero esto es suficiente para dar una idea de lo que estamos tratando.

En este ejemplo, estoy usando el módulo $http AngularJS, pero también lo he probado con XMLHttpRequest puro y obtuve el mismo resultado.

Como dije, solo obtengo el POST http://(...) net::ERR_FILE_NOT_FOUND con archivos de más de 499 mb (50+ fragmentos) y solo en Chrome.

Estoy publicando esto aquí porque he estado buscando una solución, pero no pude encontrar nada relacionado con este problema, lo más cercano que encontré en Internet fue este problema en el foro del proyecto Chromium:

https://code.google.com/p/chromium/issues/detail?id=375297

En este punto, realmente ya no sé qué hacer, así que me gustaría saber si alguien ha tenido un problema similar en el pasado y podría solucionarlo de alguna manera.

Gracias por las respuestas de antemano.

Answer 1

Al final de los archivos fuente de cromo, había encontrado un blob límites.

1. ChromeOS:

   • Ram - 20%
   • Disco: 50% Nota: el disco es la partición del usuario, por lo que el sistema operativo aún puede funcionar si está lleno.

2. Androide:

   • RAM - 1%
   • Disco - 6%
3. Escritorio:
   • Ram - 20%, o 2 GB si x64.
   • Disco - 10%

enlace de repositorio de cromo: https://cs.chromium.org/chromium/src/storage/browser/blob/blob_memory_controller.cc?l=63

Answer 2

El cromo solo puede asignar 500 MB para cualquier blob, por lo que si intenta asignar 500 MB + 1 byte, ignorará claramente ese byte. Para resolverlo, tendrá que leer el archivo en fragmentos de 499 MB y luego tendrá que combinar el archivo en servidor.

O puedes probar algo como ZipJS y luego subir el zip, funcionó para mí.

    var zip = new JSZip();
    zip.file("file1", "content1");
    zip.file("file2", "content2");

Answer 3

Parece que es el problema del plugin de Firebug. Intenta desactivarlo. Esto funciona para mi.

El navegador Firefox. Tuve un problema cuando cargué el archivo por trozos. He desactivado los complementos y la pérdida de memoria no aparece. Tal vez te ayude

Para Chrome todo funciona bien.