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

Javascript jsZip打开png图像,使用ajax将其发布到服务器中,javascript,jquery,ajax,post,jszip,Javascript,Jquery,Ajax,Post,Jszip,尝试使用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").th

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

我做错了什么?

$。ajax
将尝试将内容作为unicode字符串处理。添加
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
  })
  // ...
zipEntry.async("blob").then(function (blob) {
  // ...
  $.ajax({
    type: "POST",
    url:  pngfilepath,
    data: blob,
    contentType: "image/png", // or compute it
    processData: false
  })
  // ...