Asp.net Core Web API - Downloading multiple images from blob storage to zip file (via Axios get)

Question

我正在嘗試下載包含許多文件（各種類型）的 zip 文件 - 雖然我確實下載了 zip 文件，但不幸的是，當我嘗試打開它時會引發以下錯誤：

zip 文件錯誤

圖像使用 azure blob 存儲進行存儲。

如果您有任何想法，請提供幫助。

我的 Vue.js 前端有一個按鈕，它調用以下命令：

    GetAllAssetResources ({commit},id)
    {
        console.log("Getting Asset Resources:" + id);
        return new Promise((resolve) => {
            axios.get(CONFIG.platformEndPoints+  '/asset/downloadResources/' + id)
            .then( (response) => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'resources.zip');
                document.body.appendChild(link);
                link.click();
            })
        })
    }

這調用了我的 controller 方法（使用 C#）：

    [HttpGet]
    public async Task<IActionResult> DownloadResources(string guid)
    {
        return File(await _ResourceService.DownloadAllAssetResources(guid), MediaTypeNames.Application.Octet, "resources");
    }

這調用了我的服務：

    public async Task<byte[]> DownloadAllAssetResources(string guid)
    {
        var assetDetails = await _AssetDetails.FindAsync(guid);
        var resources = assetDetails.res.ToList();
        byte[] archiveFile;

        await using (var archiveStream = new MemoryStream())
        {
            using (var archive = new ZipArchive(archiveStream, ZipArchiveMode.Create, true))
            {
                foreach (var file in resources)
                {
                    var fileName = guid+ "_" + file.name;
                    var zipArchiveEntry = archive.CreateEntry(fileName, CompressionLevel.Fastest);
                    var bytes = await _Storage.GetBytes("resources", fileName);

                    await using (var zipStream = zipArchiveEntry.Open())
                    {
                        zipStream.Write(bytes, 0, bytes.Length);
                    }
                }
            }

            archiveFile = archiveStream.ToArray();
        }

        return archiveFile;
    }

Answer 1

這只是更新我的 axios 調用以包含響應類型的情況：

        GetAllAssetResources ({commit},assetDetailid)
    {
        console.log("Getting Asset Resources:" + id);
        return new Promise((resolve) => {
            axios({
                url: CONFIG.platformEndPoints+  '/asset/downloadResources/' + id,
                method: 'GET',
                responseType: 'blob'})
            .then( (response) => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'resources.zip');
                document.body.appendChild(link);
                link.click();
            })
        })
    },