热门标签 | 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开始压缩:

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


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


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


推荐阅读
  • Visual Studio Code (VSCode) 是一款功能强大的源代码编辑器,支持多种编程语言,具备丰富的扩展生态。本文将详细介绍如何在 macOS 上安装、配置并使用 VSCode。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 如何将TS文件转换为M3U8直播流:HLS与M3U8格式详解
    在视频传输领域,MP4虽然常见,但在直播场景中直接使用MP4格式存在诸多问题。例如,MP4文件的头部信息(如ftyp、moov)较大,导致初始加载时间较长,影响用户体验。相比之下,HLS(HTTP Live Streaming)协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段,并生成一个M3U8播放列表文件,实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流,包括技术原理和具体操作步骤,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 利用python爬取豆瓣电影Top250的相关信息,包括电影详情链接,图片链接,影片中文名,影片外国名,评分,评价数,概况,导演,主演,年份,地区,类别这12项内容,然后将爬取的信息写入Exce ... [详细]
  • 深入解析HTML5字符集属性:charset与defaultCharset
    本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset,帮助开发者更好地理解和应用这些属性,以确保网页在不同环境下的正确显示。 ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 我有一个非常有效的多列布局,用于以平铺格式展示图片等元素。然而,我希望这些元素能够按照时间顺序排列。虽然可以通过查询按最后修改时间获取数据,但当前的布局仍然按列进行排序。 ... [详细]
  • window下的python安装插件,Go语言社区,Golang程序员人脉社 ... [详细]
  • 命令模式是一种行为设计模式,它将请求封装成一个独立的对象,从而允许你参数化不同的请求、队列请求或者记录请求日志。本文将详细介绍命令模式的基本概念、组件及其在实际场景中的应用。 ... [详细]
  • 利用REM实现移动端布局的高效适配技巧
    在移动设备上实现高效布局适配时,使用rem单位已成为一种流行且有效的技术。本文将分享过去一年中使用rem进行布局适配的经验和心得。rem作为一种相对单位,能够根据根元素的字体大小动态调整,从而确保不同屏幕尺寸下的布局一致性。通过合理设置根元素的字体大小,开发者可以轻松实现响应式设计,提高用户体验。此外,文章还将探讨一些常见的问题和解决方案,帮助开发者更好地掌握这一技术。 ... [详细]
  • 【图像分类实战】利用DenseNet在PyTorch中实现秃头识别
    本文详细介绍了如何使用DenseNet模型在PyTorch框架下实现秃头识别。首先,文章概述了项目所需的库和全局参数设置。接着,对图像进行预处理并读取数据集。随后,构建并配置DenseNet模型,设置训练和验证流程。最后,通过测试阶段验证模型性能,并提供了完整的代码实现。本文不仅涵盖了技术细节,还提供了实用的操作指南,适合初学者和有经验的研究人员参考。 ... [详细]
  • 在《Python编程基础》课程中,我们将深入探讨Python中的循环结构。通过详细解析for循环和while循环的语法与应用场景,帮助初学者掌握循环控制语句的核心概念和实际应用技巧。此外,还将介绍如何利用循环结构解决复杂问题,提高编程效率和代码可读性。 ... [详细]
  • 探索聚类分析中的K-Means与DBSCAN算法及其应用
    聚类分析是一种用于解决样本或特征分类问题的统计分析方法,也是数据挖掘领域的重要算法之一。本文主要探讨了K-Means和DBSCAN两种聚类算法的原理及其应用场景。K-Means算法通过迭代优化簇中心来实现数据点的划分,适用于球形分布的数据集;而DBSCAN算法则基于密度进行聚类,能够有效识别任意形状的簇,并且对噪声数据具有较好的鲁棒性。通过对这两种算法的对比分析,本文旨在为实际应用中选择合适的聚类方法提供参考。 ... [详细]
  • 在Ubuntu 20.04 Linux系统中部署Git的详细步骤与最佳实践
    在Ubuntu 20.04 Linux系统中部署Git时,首先确保您的操作系统版本正确,并已以具备sudo权限的用户身份登录。推荐使用APT软件包管理器进行安装,这是最简便且可靠的方法。此外,遵循最佳实践,如定期更新Git版本和配置全局设置,可以进一步提升使用体验和安全性。 ... [详细]
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社区 版权所有