上传图片，将其转换为zip（客户端），然后上传到服务器

Question

上传图片文件，并在客户端将其转换为zip，然后上传（转换后的zip）文件到服务器。 有一个 js jsZip 可以在客户端将图像文件转换为 zip，但问题是我如何将这个转换后的 zip 文件直接上传到服务器。

Answer 1

使用jsZip

使用 HTML 上传文件

<form action="/your-action"> <input type="file" id="mypicid" name="pic"> <button onclick =" myFunction() "> Upload <button> </form>

在上传时点击将文件转换为 zip

  function myFunction(){

/* Make a zip file here */

 var fi = document.getElementById("mypicid");
 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], "name.zip");

             var formData = new FormData();
             formData.append('fileZip', files);

        //send generated file to server
             $.ajax({
                data: formData,
                url : '/your_path',
                type : 'POST',
                processData: false,
                contentType: false,
                success : function(response) {
                     alert("success");
                }
            });

        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);
}