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，请参阅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
  })
  // ...

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

1 个答案: