从Web API返回时Zip损坏了吗? [英] Corrupted Zip while returning from Web API?

问题描述

在我的MVC项目中，我有一个对Web API的AJAX调用.

On my MVC project I have an AJAX call to a Web API.

我发送了一系列文档的路径，(应该)API将其压缩并返回该压缩文件.

I send an array of documents' routes, the API (should) zips them and returns the zip file.

self.zipDocs = function (docs, callback) {
    $.ajax({
        url: "../SharedAPI/documents/zip",
        type: "POST",
        data: docs,
        contentType: "application/json",
        success: function (data) {
            var zip = new JSZip(data);
            var content = zip.generate({ type: "blob" });
            saveAs(content, "example.zip");
        },
        error: function (data) {
            callback(data);
        }
    });
}

以及我在WebAPI上的ZipDocs函数(使用DotNetZip库):

And my ZipDocs function on the WebAPI (using the DotNetZip library):

[HttpPost]
    [Route("documents/zip")]
    public HttpResponseMessage ZipDocs([FromBody] string[] docs)
    {

        using (var zipFile = new ZipFile())
        {
            zipFile.AddFiles(docs, false, "");
            return ZipContentResult(zipFile);
        }
    }

    protected HttpResponseMessage ZipContentResult(ZipFile zipFile)
    {
        // inspired from http://stackoverflow.com/a/16171977/92756
        var pushStreamContent = new PushStreamContent((stream, content, context) =>
        {
           zipFile.Save(stream);
            stream.Close(); // After save we close the stream to signal that we are done writing.
        }, "application/zip");

        return new HttpResponseMessage(HttpStatusCode.OK) { Content = pushStreamContent };
    }

但是当Zip返回时，出现以下错误:

But when the Zip is returned I got the following error:

未捕获的错误:zip损坏:缺少16053个字节.

Uncaught Error: Corrupted zip: missing 16053 bytes.

真正奇怪的是，当我将API文件中的zip文件保存到磁盘上时它已正确保存，并且我可以毫无问题地打开该文件了！

What is really weird, when I save on the API the zip file to the disk it gets saved properly and I can open the file without any problem!

我做错了什么?我错过了什么吗? 请帮忙！

What am I doing wrong? am I missing something? Please help!

谢谢.

推荐答案

两件事:

1/$.ajax处理文本响应，并将尝试(utf-8)解码内容:您的zip文件不是文本，您将获得损坏的内容. jQuery 不支持二进制内容，因此您需要使用上一个链接，并在jQuery上添加ajax传输，或直接使用XmlHttpRequest.使用xhr时，您需要设置xhr.responseType = "blob"并从xhr.response斑点中读取.

1/ $.ajax handles text responses and will try to (utf-8) decode the content: your zip file isn't text, you will get a corrupted content. jQuery doesn't support binary content so you need to use the previous link and add an ajax transport on jQuery or use directly a XmlHttpRequest. With an xhr, you need to set xhr.responseType = "blob" and read from xhr.response the blob.

2/假设您的js代码段是整个函数，则您(尝试)获取二进制内容，解析zip文件，重新生成，然后将内容提供给用户.您可以直接给出结果:

2/ assuming your js code snippet is the whole function, you (try to) get a binary content, parse the zip file, re-generate it, give the content to the user. You can give directly the result:

// with xhr.responseType = "arraybuffer"
var arraybuffer = xhr.response;
var blob = new Blob([arraybuffer], {type:"application/zip"});
saveAs(blob, "example.zip");

// with xhr.responseType = "blob"
var blob = xhr.response;
saveAs(blob, "example.zip");

示例:

带有 jquery.binarytransport.js (可让您使用的任何库下载Blob或ArrayBuffer即可)

with jquery.binarytransport.js (any library that let you download a Blob or an ArrayBuffer will do)

$.ajax({
  url: "../SharedAPI/documents/zip",
  dataType: 'binary', // to use the binary transport
  // responseType:'blob', this is the default
  // [...]
  success: function (blob) {
    // the result is a blob, we can trigger the download directly
    saveAs(blob, "example.zip");
  }
  // [...]
});

使用原始XMLHttpRequest，您可以看到此问题，您只需需要添加xhr.responseType = "blob"以获得斑点.

with a raw XMLHttpRequest, you can see this question, you just need to add a xhr.responseType = "blob" to get a blob.

我从没使用过C#，但是据我所知，[FromBody]对数据格式非常敏感，第一种解决方案在您的情况下应该更容易实现.

I never used C# but from what I can see, [FromBody] is quite sensitive to the format of the data, the first solution should be easier to implement in your case.

这篇关于从Web API返回时Zip损坏了吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！