项目场景

后端采用文件流的方式将文件信息发送给前端
  
  
  
  
  
  
  
  ，前端需要接收相应的流信息做出对应的操作  
  
  
  
  
  
  
  
 ，如接收到图片
  
  
  
  
  
  
  
  、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: get, //请求模式 params: row, //请求参数 responseType: blob, }) }

3
 

 

 

 

 

 

 

 

、文件下载

/** * 下载压缩包文件 * @param {blob} fileArrayBuffer 文件流 * @param {String} filename 文件名称 * @param {String} fileType 文件格式 */ export const downloadZip = (fileArrayBuffer, filename, fileType) => { let data = new Blob([fileArrayBuffer], { type: fileType == zip ? application/zip,charset=utf-8 : application/x-rar-compressed,charset=utf-8 }); if (typeof window.chrome !== undefined) { // Chrome var link = document.createElement(a); link.href = window.URL.createObjectURL(data); link.download = filename; link.click(); console.log(data); } else if (typeof window.navigator.msSaveBlob !== undefined) { // IE var blob = new Blob([data], { type: fileType == zip ? application/zip : application/x-rar-compressed }); window.navigator.msSaveBlob(blob, filename); } else { // Firefox var file = new File([data], filename, { type: fileType == zip ? application/zip : application/x-rar-compressed }); window.open(URL.createObjectURL(file)); } }

4

 

 

 

 

 

 

 

 、Blob下载时的文件格式

文件格式 type类型 aac audio/aac .abw application/x-abiword .avi video/x-msvideo .azw application/vnd.amazon.ebook .bin application/octet-stream .bmp image/bmp .bz application/x-bzip .bz2 application/x-bzip2 .csh application/x-csh .css text/css .csv text/csv .doc application/msword .docx application/vnd.openxmlformats-officedocument.wordprocessingml.document .eot application/vnd.ms-fontobject .epub application/epub+zip .gif image/gif .htm/.html text/html .ico image/vnd.microsoft.icon .ics text/calendar .jar application/java-archive .jpeg/.jpg image/jpeg .js text/javascript .json application/json .jsonld application/ld+json .mid/.midi audio/midi audio/x-midi .mjs text/javascript .mp3 audio/mpeg .mpeg video/mpeg .mpkg application/vnd.apple.installer+xml .odp application/vnd.oasis.opendocument.presentation .ods application/vnd.oasis.opendocument.spreadsheet .odt application/vnd.oasis.opendocument.text .oga audio/ogg .ogv video/ogg .ogx application/ogg .otf font/otf .png image/png .pdf application/pdf .ppt application/vnd.ms-powerpoint .pptx application/vnd.openxmlformats-officedocument.presentationml.presentation .rar application/x-rar-compressed .rtf application/rtf .svg image/svg+xml .swf application/x-shockwave-flash .tar application/x-tar .tif/.tiff image/tiff .ttf font/ttf .txt text/plain .vsd application/vnd.visio .wav audio/wav .weba audio/webm .webm video/webm .webp image/webp .woff font/woff .woff2 font/woff2 .xhtml application/xhtml+xml .xls application/vnd.ms-excel .xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xml application/xml 代码对普通用户来说不可读 (RFC 3023, section 3)text/xml 代码对普通用户来说可读 (RFC 3023, section 3) .xul application/vnd.mozilla.xul+xml .zip application/zip .3gp video/3gpp audio/3gpp（若不含视频） .3g2 video/3gpp2 audio/3gpp2（若不含视频） .7z application/x-7z-compressed