时间戳

首页 > 解决方案 > 从 axios post 检索响应数据与原始响应数据不同

javascript - 从 axios post 检索响应数据与原始响应数据不同

问题描述

我一直在开发 Flask/Vue webapp，但遇到了关于下载文件的问题。我正在使用flask从后端提供用户上传，它通过send_from_directory()返回一个文件。这是通过 Vue 中的 downloadFile 方法调用的

downloadFile(key, name){

            const path = '/api/ticket/filedownload'
            this.$ajax.post(path, {address: key}, {responseType: 'arraybuffer',})
            .then((response) => {
                // Create response donwload link
                const url = window.URL.createObjectURL(new Blob([response.data], response.headers['contentType']));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', name);
                document.body.appendChild(link);
                link.click();
            })
            .catch(error => {
                console.log(error)
                window.alert("File not found")
            })
        }

这个方法我在网上很多地方找到的，似乎对大多数人都有效。然而，在前端提供的文件“包含错误”或似乎已损坏。在我的网络选项卡中，我可以清楚地看到发布请求是成功的，并且响应是发送的实际图像（例如）！当直接在我的网络选项卡（Mozilla，鼠标右键>复制>复制响应）中复制来自帖子结果的响应时，我能够检索到响应是 base64 编码的，并且可以轻松解码为上传的相同图像。然而！打印response.data时，输出完全不同，而不是base64：

base64 from network tab: R0lGODlhWAJYAvcAABAQEL2cUntSG(etc...)
console.log(response.data):GIF89aX�X���������R{R�)�1)�1�j ���������ޔ��{)��j

我尝试直接将 response.data 作为 blob 提供，或者在文件阅读器中解析它，但无济于事。我们的 this.$ajax.post 是 axios 的 post 的一种解决方法，它可以提供 returnTypes，例如 blob、arraybuffer、text、任何东西，所有这些都具有相同的结果。我的问题是：我将如何继续访问响应，例如它显示在网络选项卡中，因为我能够从 base64 转换，而不是未知格式。或者我将如何以任何成功的方式解析此响应。

标签： javascriptvue.jsbase64blobaxios

解决方案

推荐阅读