作者：益达怡君33 | 来源：互联网 | 2023-09-24 16:04
1、事情是这样的：我们需要在客户端在上传他自己的文件的时候进行一下压缩，这个压缩工作是在客户端进行的，目的是节省服务端的计算资源和存储空间。
2、然后我们选择了github上的工具：JSZip
3、在实际使用的过程中，我们遇到了这样的场景：用户需要同时上传多个文件，（文件类型不确定），当上传多个文件的时候会频繁出现这样的bug：前端
上的
设置
，然后上传时选择多个文件，执行上传程序，并将文件压缩到zip包中时，会发现zip中少了一些文件（并不是总这样，跟文件大小和数量好像也没有直接关系，亲自测试过），另一个bug是：上传文件后，如果想再压缩另一个zip，必须刷新一下当前页面，否则，前一次选择的文件也会被压入到这次的zip当中。而且刷新页面后还是会出现压缩文件缺失的情况。
具体代码和场景我下面尽量复原：
js代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| require('cp');
require('./style.css');// 自定义样式
const JSZip = require('jszip');
const fileSaver = require('file-saver');
const zip = new JSZip();
$(() => {
// 写入自定义的js代码
/* 客户端
模型压缩开始 */
$('#testJSZip').on('click', function() {
var fileBox = $('#testFile');
var fileList = fileBox[0].files;
var flag = false;
for (var i = 0; i
if (i === fileList.length - 1) {
flag = true;
}
readFile(fileList[i], flag);
}
});
function readFile(file, flag) {
const reader = new FileReader();
// reader.readAsText(file);
// 中文windows系统 txt 文本多数默认编码 gbk
// reader.readAsText(file, 'gbk');
reader.readAsDataURL(file);
reader.Onloadend= function(e) {
var result = reader.result;
var objName = 'example';
// 获取obj文件的文件名
if (file.name.indexOf('.obj') !== -1) {
var num = file.name.indexOf('.obj');
objName = file.name.substring(0, num);
}
// 如果是图片文件，需要保存的时候把base64转为Blob二进制格式
if (file.name.indexOf('.jpg' | '.png' | '.jpeg') !== -1) {
result = convertBase64UrlToBlob(result);
}
zip.file(file.name, result, {type: 'blob'});
console.log(zip);
// zip.folder().forEach();
console.log(file.name);
if (flag) {
zip.generateAsync({
type: 'blob',
compression: 'DEFLATE', // force a compression for this file
compressionOptions: { // 使用压缩等级，1-9级，1级压缩比最低，9级压缩比最高
level: 6,
},
}).then(function(content) {
// see FileSaver.js
console.log('content:' + content);
Promise.resolve(true).then(function() {
fileSaver.saveAs(content, objName + '.zip');
});
});
}
};
}
/* 客户端
模型压缩结束 */
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData) {
var bytes = window.atob(urlData.split(',')[1]);
// 处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type: 'image/jpg'});
}
}); |
ejs代码：
选择本地文件：
点击button开始压缩：
好了这是第一次压缩：可见文件是完整的，然后我们做下面的操作，不刷新页面的前提下，再选择两个文件，执行压缩：
结果前面的结果也被压缩到文件当中去了！！（缓存问题后面会提到）
接着，我们刷新页面重新上传：就会出现有时少个文件，有时多个文件的情况，当然多文件时也是上次选择过的文件
被这个东西搞得头疼了很久了，如果有用过的，求大神帮忙解答一下，不胜感激
![[译]技术公司十年经验的职场生涯回顾](https://img8.php1.cn/3cdc5/24912/711/b6574f3292f9dc00.png)
京公网安备 11010802041100号