代码之家 › 专栏 › 技术社区 › Brady Holt

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

jszip ember.js webpack

Brady Holt · 技术社区 · 5 年前

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

改变 jsZip.loadAsync(file) 我得到:

错误:找不到中心目录的结尾:这是zip文件吗?

0 回复 | 直到 5 年前

Brady Holt 5 年前

我最终通过使用url加载器和 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);

推荐文章

Shawn · 如何在组件内部完成余烬操作后重定向

7 年前

Sow Hari · 使用余烬计算属性(过滤器)过滤模型,并使用余烬模型表2以表格格式显示。没有可显示的记录

7 年前

AmazingDayToday · Ember:如何获取在Route->Model返回的文件的值

7 年前

Nikolay Shcherba · 在模型挂钩之前使用ember simple auth-in进行身份验证

7 年前

Alexandro · 使用Express和Ember启动web应用程序

7 年前

pbanka · 我的Typescript/Ember 3.1应用程序中有一个枚举,运行时出现导入错误。发生什么事了?

7 年前

Vikrant Siwach · 是否在验收测试中覆盖幻影响应?

7 年前

Androidicus · 余烬/把手:带参数数组的本地化辅助对象

7 年前

Thomas Anuragh27crony · 在余烬组件的生成上下文上测试属性

7 年前

Michel Fernandes · 部署EmberJS前端应用程序[已关闭]

7 年前