从 ReactJs/Axios 下载的 Zip 文件已损坏答案

【问题标题】：Zip File downloaded from ReactJs/Axios is corrupted从 ReactJs/Axios 下载的 Zip 文件已损坏
【发布时间】：2019-06-22 04:01:23
【问题描述】：

我正在尝试从 Django api 下载一个 zip 文件并让用户下载它。 zip 中有两个 .csv 文件。

我可以单独下载单个 .csv 文件，但是当我尝试下载 zip 并解压缩时，我收到 zip 已损坏的错误消息。对于健全性检查，我可以通过 Postman 发送请求。我可以使用它成功下载并解压缩文件。

这是我的代码片段：

        axios
        .post('http://0.0.0.0:8000/sheets/', data,
            {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'responseType': 'arraybuffer'
                }
            })
        .then(res => {
            console.log(res.data)
            const disposition = res.request.getResponseHeader('Content-Disposition')
            var fileName = "";
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) {
                fileName = matches[1].replace(/['"]/g, '');
            }
            let blob = new Blob([res.data], { type: 'application/zip' })

            const downloadUrl = URL.createObjectURL(blob)
            let a = document.createElement("a"); 
            a.href = downloadUrl;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();

【问题讨论】：

您找到解决方案了吗？我正在努力解决同样的问题:(
把答案贴在下面！
在我的情况下，该文件显示已损坏，也没有标题。我正在执行与上面相同的代码。有没有人解决了这个问题？任何线索都会有所帮助。
文件名正则表达式帮助了很多！
React 中的相同问题。但我尝试直接从浏览器中的 API 进行，它可以正常工作。

标签： django reactjs zip axios zipfile

【解决方案1】：

要添加到 btbam91 的回复中：responseType 必须是配置的一部分。在上面的例子中：

 axios
    .post('http://0.0.0.0:8000/sheets/', data,
        {
            responseType: 'arraybuffer',
            headers: {
                'Content-Type': 'multipart/form-data',
            }
        })

【讨论】：

【解决方案2】：

问题是 'responseType': 'arraybuffer' 不应该在“headers”中。

【讨论】：

那应该在哪里呢？
@Tomer responseType 不应该是 headers 属性引用的对象中的属性，而是作为配置对象中的“根”属性（headers 属性的兄弟）如果存在）。