项目场景
后端采用文件流的方式将文件信息发送给前端,前端需要接收相应的流信息做出对应的操作,如接收到图片、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 | 
| 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 |