jsZip打开png图像，使用ajax将其发布到服务器

Posted 2023-02-19

【中文标题】jsZip打开png图像，使用ajax将其发布到服务器

【英文标题】：jsZip opened png image, POST it into server with ajax

【发布时间】：2017-01-05 04:29:08

【问题描述】：

尝试使用 jszip 从 zip 发布 .png 图像文件。尝试对 .xml 文件和 .mod 文件执行相同操作时，相同的代码有效，但不适用于 .png 文件。

我使用的代码是：

JSZip.loadAsync(f) // f is the .zip file in the input field
.then(function(zip) 
    zip.forEach(function (relativePath, zipEntry) 
        zipEntry.async("string").then(function (data) 
            //data is the png image
            var pngfilepath="/serverImagesPath/" + zipEntry.name;
            var blob = dataURLtoBlob(data);
            $.ajax(
              type: "POST",
              url:  pngfilepath,
              data: blob,
              dataType: "binary",
            ).done(function ( ) 
                console.log('put correctly png- ' + pngfilepath);
            ).fail(function ( jqXHR, textStatus, errorThrown ) 
                console.log("err png: " + errorThrown, textStatus);
            );
        );
    );
);


function dataURLtoBlob(dataurl) 
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--)
        u8arr[n] = bstr.charCodeAt(n);
    
    return new Blob([u8arr], type:mime);

我做错了什么？

【参考方案1】：

$.ajax 将尝试将内容处理为 unicode 字符串。添加processData: false，见this answer（和jQuery documentation）：

$.ajax(
  type: "POST",
  url:  pngfilepath,
  data: blob,
  processData: false
)

你也可以稍微简化一下你的代码，.async() 支持 blob：

zipEntry.async("blob").then(function (blob) 
  // ...
  $.ajax(
    type: "POST",
    url:  pngfilepath,
    data: blob,
    contentType: "image/png", // or compute it
    processData: false
  )
  // ...