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

Question

尝试使用 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});
}

我做错了什么？

Answer 1

$.ajax将尝试将内容处理为 unicode 字符串。添加processData: false，请参阅此答案（和jQuery 文档）：

$.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
  })
  // ...