JSZip压缩图像上传，加密，解密，显示图像

Question

最初，我使用FileReader将图像上传转换为客户端的base64，然后转换为encrypt。会将结果附加到表单字段中，然后提交，但这会占用太多时间，因此我正在寻找替代方法。

我正在尝试使用JSZip先压缩然后加密，然后提交，检索，解密和显示图像，但是我仍然坚持如何执行。我尝试压缩的样子是这样的。

$(document).on("change", "#chatImage", function() {
    var rid = $(this).closest(".chat").data("id");
    var tempSrc = $(this).val();
    /* Make a zip file here */
    var fi = $(this);
    var fileInput = fi;
    var files = [];
    // get all selected file
    $.each(fileInput.files, function(i, file) {
        files.push(file);
    });
    //create a zip object
    var zip = new JSZip();
    //add all files to zip 
    function addFileToZip(n) {
        if(n >= files.length) {
            //here generate file to zip on client side
            zip.generateAsync({type:"blob", compression:"default"}).then(function(content){
                //generated zip content to file type
                var files = new File([content], "default.zip");
                console.log(files);
                var eImgArray = {};
                $.ajax({
                    url : ajax_object.ajax_url,
                    type : 'post',
                    data : {
                    action: 'get_room_member_keys',
                    rid : rid,
                    },
                    beforeSend: function() {},
                    success: function(html) {
                        var pubKeys = $.parseJSON(html);
                        $.each( pubKeys, function( key, value ) {
                            var imgEncrypt = cryptico.encrypt(files, value);
                            var imgSrc = imgEncrypt.cipher;
                            eImgArray[key] = imgSrc;
                        });
                        var strImgArray = JSON.stringify(eImgArray);
                    },
                });
            });
            return;
        }
        var file = files[n];                    
        var arrayBuffer;
        var fileReader = new FileReader();
        fileReader.onload = function() {
            arrayBuffer = this.result;
            zip.file(file.name, arrayBuffer);
            addFileToZip(n + 1);
        }
        fileReader.readAsArrayBuffer(file);
    }
    addFileToZip(0);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a id="jaj3dm" class="chat" />
<input id="chatImage" type="file" multiple="multiple" />

这显示了控制台中的加密字符串和压缩结果，但是当我解密并将结果记录到控制台时，我什么也没得到。正确的方法是什么？或者更好的方法是什么？

Answer 1

您荒谬地使这个复杂化了！

$(document).on("change", "#chatImage", function() {
  var files = this.files;
  var zip = new JSZip();

  for (var i = 0; i < files.length; i += 1) {
    var file = files[i];
    zip.file(file.name, file);

    console.log("added", file.name);
  }

  console.log("generating zip…");
  zip.generateAsync({type: "blob"}).then(function(content) {
    console.log("done. creating download link");

    /* All that "sending to the interwebz" stuff */
    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(content);
    link.innerText = "Download…";
    document.body.appendChild(link);

    /* display the uploaded images */
    function show_all_images(relpath, file) {
      console.log("showing", relpath);
      if (file.dir) {
        return file.forEach(show_all_images);
      }
      var img = document.createElement("img");
      img.alt = relpath;
      document.body.appendChild(img);
      file.async("blob").then(function(blob) {
        img.src = window.URL.createObjectURL(blob);
      });
    }
    new JSZip.loadAsync(content).then(zip => zip.forEach(show_all_images));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/cryptico/0.0.1343522940/cryptico.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="chatImage" type="file" multiple="multiple" />