热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

求解!小弟向使用过前端压缩工具JSZip!求助!

1、事情是这样的:我们需要在客户端在上传他自己的文件的时候进行一下压缩,这个压缩工作是在客户端进行的,目的是节省服务端的计算资源和存储空

  1. 1、事情是这样的:我们需要在客户端在上传他自己的文件的时候进行一下压缩,这个压缩工作是在客户端进行的,目的是节省服务端的计算资源和存储空间。


  2. 2、然后我们选择了github上的工具:JSZip


  3. 3、在实际使用的过程中,我们遇到了这样的场景:用户需要同时上传多个文件,(文件类型不确定),当上传多个文件的时候会频繁出现这样的bug前端

    1
    html

    上的

    1
    input file

    设置

    1
    multiple

    ,然后上传时选择多个文件,执行上传程序,并将文件压缩到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代码:

1
2
3
4
5
6
7
   


       


           


           


       


       

   

选择本地文件:


点击button开始压缩:

好了这是第一次压缩:可见文件是完整的,然后我们做下面的操作,不刷新页面的前提下,再选择两个文件,执行压缩:


结果前面的结果也被压缩到文件当中去了!!(缓存问题后面会提到)
接着,我们刷新页面重新上传:就会出现有时少个文件,有时多个文件的情况,当然多文件时也是上次选择过的文件


被这个东西搞得头疼了很久了,如果有用过的,求大神帮忙解答一下,不胜感激


推荐阅读
author-avatar
益达怡君33
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有