Question

我有一个<input id=file-chooser" type="file"/>控件，允许用户上传.zip文件，然后将其交给jszip进行进一步处理。

我正在尝试通过在Webpack中加载本地.zip测试文件，将其转换为Blob，然后手动触发带有文件内容的change事件来对此进行测试。

jszip抱怨该zip文件无效，我想我在转换时搞砸了。

我尝试过：

// Load file at webpack compilation time
const zipFileRaw = require("raw-loader!../test.zip");

// Convert to ArrayBuffer
const bytes = new Uint8Array(zipFileRaw.length);
for (var i = 0; i < zipFileRaw.length; ++i) {
  bytes[i] = zipFileRaw.charCodeAt(i);
}

// Construct a 'change' event with file Blob
const file = new Blob(bytes, { type: "application/zip" });
file.name = "test.zip";
const event = { type: "change", target: { files: [file] } };

// Fire the event
$("#file-chooser").trigger(event);

启动事件有效，并调用我的事件处理程序。在change事件的事件处理程序中，我调用jsZip.loadAsync(file)并得到：

错误：找不到中央目录的末尾：这是一个zip文件吗？

Answer 1

我最终通过使用url-loader和this solution将base64转换为Blob来使它工作。

// Load file at webpack compilation time
const zipFileRaw: string = require("url-loader!../test.zip");
const [match, contentType, base64] = zipFileRaw.match(/^data:(.+);base64,(.*)$/);

// Convert the base64 to a Blob
// Souce: https://stackoverflow.com/a/20151856/626911
const file = base64toBlob(base64, contentType);

// Construct a 'change' event with file Blob
const event: any = { type: "change", target: { files: [file] } };

// Fire the event
$("#file-chooser").trigger(event);

使用webpack加载二进制文件并转换为Blob

1 个答案: