jsZipはpng画像を開いて、それをajaxでサーバーにPOSTします

Question

jpzipで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は、コンテンツをユニコード文字列として処理しようとします。 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 
    }) 
    // ...