vue2文件流下载成功后文件格式错误、打不开、内容缺失

最新推荐文章于 2024-05-29 16:26:45 发布

Salt_NaCl

最新推荐文章于 2024-05-29 16:26:45 发布

阅读量5.9k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Salt_NaCl/article/details/129023755

版权

在前端项目中，后端通过文件流方式发送文件，前端需要根据文件类型进行预览或下载。遇到的问题是，图片和PDF预览正常，但压缩包下载后损坏。原因是压缩包下载需设置responseType为'blob'。解决方案包括调整请求方式，处理文件流，以及使用Blob正确下载文件。

摘要由CSDN通过智能技术生成

项目场景

后端采用文件流的方式将文件信息发送给前端，前端需要接收相应的流信息做出对应的操作，如接收到图片、pdf将进行预览模式，将接收到压缩包形式的则进行文件下载。后端对相应的文件进行不同的传输方式进行传输，前端则需要接收相应的信息并进行操作。

问题描述

当收到图片、pdf则可以正常的进行操作，当接收到压缩包文件流时候可以正常下载，但是下载后，下载的文件损坏了。

原因分析

由于文件不同，所以接收方式也是有区别的，普通的图片、pdf可以采用日常的请求方式去请求，而压缩包的请求需要加上接收数据格式responseType:为blob，默认的responseType为""。

解决方案

1、图片的解决方式

export const getFileImg = row => {
   
    return request({
   
        url: '/api/blade-resource/oss/endpoint/get-file-secret',	//请求路径
        method: 'get',	//请求模式
        params: row,	//请求参数
    })
}

2、文件流的解决方式

export const getFileZip = row => {
   
    return request({
   
        url: '/api/blade-resource/oss/endpoint/get-file-secret',	//请求路径
        method