JQuery $.get 和膨胀数据

Question

我收到了一个小型浏览器应用程序，它获取一个二进制文件，解压缩它，然后在浏览器中显示它的内容。

但是，我无法将数据正确转换为字节数组，随后膨胀失败并出现“无效的代码长度设置”。

这是我的get方法：

$.get("metafile.hsm", function (metaFile) {
    readCellFile(metaFile);
});

这是膨胀文件的方法：

  function readCellFile(file) {
    var reader = new FileReader(); 
    //      var file = document.getElementById('cell_file_input').files[0];
    reader.onload = function() { 
      var compressedData = new Uint8Array(reader.result);
      var data        = pako.inflate(compressedData); // Error "Invalid code length set"
      var buf = new flatbuffers.ByteBuffer(data);
      var cell = hdm.storage.hsg.Cell.getRootAsCell(buf);
      var features = parseCell(cell);
      // ...

    }

    reader.onerror = function(event) {
      console.error("File could not be read! Code " + event.target.error.code);
    };

    var blob = new Blob([file], {type: "application/octet-stream"});
    reader.readAsArrayBuffer(blob);
  }

我做错了吗？我可以排除文件已损坏，正如您在注释掉的行中看到的那样，我正在测试上传文件并且它有效。

Answer 1

首先，您应该检查是否真的需要在 Javascript 中进行 gzipping 来实现您的目标。如果服务器配置为支持 gzipping 文件，并且浏览器支持 gzipping，则文件（即使是通过 javascript 请求的文件）应自动压缩。

如果您需要采用这种方法（例如，因为您无法控制服务器），那么最好从 Web Worker 中获取文件并在那里进行解压缩。以下代码（使用 gzip 压缩文本文件在 chrome 上测试）假设您在与主脚本和工作程序相同的目录中有 pako_inflate.min.js。另请注意，如果在本地进行测试，您的浏览器可能会出于安全原因阻止从本地文件加载 Web Worker。

只需调用 loadFile 并传递您要加载的文件的名称。 onFileLoaded 将在数据加载完成后被调用。

fileLoader.js

/*
* If you are running this locally your browser may block you from 
* loading web worker from a local file. For testing you may want to run 
* a simple local web server like so: 'python -m http.server 8000'
*/
var gzippedFileLoaderWorker = new Worker("gzippedFileLoaderWorker.js");

gzippedFileLoaderWorker.onmessage = function (event) {
    var message = event.data;
    if (message.type == "START") {  
        console.log(message.data);
    } else if (message.type == "END") {
        onFileLoaded(message.data);         
    } else if (message.type == "ERROR") { 
        console.log(message.data); 
    }
};

function loadFile(fileName) {
    gzippedFileLoaderWorker.postMessage({ 
        type: 'loadFile', 
        fileName: fileName 
    }); 
}

function onFileLoaded(uncompressedFileData) {
    console.log("Data Loaded:" + uncompressedFileData);
}

gzippedFileLoaderWorker.js

importScripts('pako_inflate.min.js');

onmessage = function(event) {
  var message = event.data;
  if (message.type === "loadFile") {
    postMessage({ 
        'type' : 'START', 
        'data' : "Started Downloading: " + message.fileName 
    });
    try {
        /* 
        * Fetch is not supported on ie yet. If this is a requirement 
        * find a polyfill like whatwg-fetch 
        */
        fetch(message.fileName).then(function(response) {
            if (!response["ok"]) { 
                postMessage({ 
                    'type' : 'ERROR', 
                    'data' : "Error loading: " + message.fileName 
               })       
            }
            return response["arrayBuffer"](); 
        }).then(function(zipped) { 
            return pako.ungzip(new Uint8Array(zipped));
        }).then(function(binary) { 
            /* 
            *  Do any processing on the binary data here so you don't
            *  block the main thread! Then pass that data back as an
            *  object instead of the binary in the post message
            */
            postMessage({ 
                'type' : 'END', 
                'data' : binary 
            });
        }); 
    } catch(err) {
        postMessage({ 
            'type' : 'ERROR', 
            'data' : err.message 
        });
    }
  }
}