场景

有一个界面上传文件（zip）和图片，另一个界面展示这个图片列表，当点击图片的时候，请求文件（zip），解压之后使用，我们这里只做一个 blob URL

开始

主要是使用 JSZip 这个包

封装

const getZipFiles = async (zipUrl) => {
  const response = await axios({
    method: "get",
    url: zipUrl,
    responseType: "arraybuffer", // 类型必须为arraybuffer
  });
  // loadAsync加载其他类型资源会出问题，比如资源乱码
  const zipData = await JSZip.loadAsync(response.data);
  // 创建 URL 对象 const url = URL.createObjectURL(blob);
  return zipData;
};

注意版本

/ 2.x
zip.file("test.txt").asText();
// 3.x
zip.file("test.txt").async("string")
.then(function (content) {
    // use content
});


// 2.x
zip.generate();
// 3.x
zip.generateAsync({type:"uint8array"})
.then(function (content) {
    // use content
});

// 2.x
new JSZip(data);
zip.load(data);
// zip.file(...)
// 3.x
JSZip.loadAsync(data).then(zip) {...};
zip.loadAsync(data).then(zip) {...};
// here, zip won't have (yet) the updated content

// 2.x
var data = zip.file("img.jpg").asBinary();
var dataURI = "data:image/jpeg;base64," + JSZip.base64.encode(data);
// 3.x
zip.file("img.jpg").async("base64")
.then(function (data64) {
    var dataURI = "data:image/jpeg;base64," + data64;
});

附加

const str = "Hello, world!"; 
// 将字符串转换为 Blob 对象 
const blob = new Blob([str], { type: "text/plain" }); 
// 创建 URL 对象 
const url = URL.createObjectURL(blob); 
// 使用 URL 对象下载文件 
const link = document.createElement("a"); 
link.href = url;
link.download = "file.txt"; 
document.body.appendChild(link); 
link.click(); 
// 释放 URL 对象 
URL.revokeObjectURL(url);

const blob = /* your Blob object */; 
const reader = new FileReader(); 
reader.onload = function(event) { 
    const text = event.target.result; console.log(text); 
}; 
reader.readAsText(blob);