这里写目录标题
- 项目场景
- 问题描述
- 原因分析
- 解决方案
项目场景
后端采用文件流的方式将文件信息发送给前端，前端需要接收相应的流信息做出对应的操作，如接收到图片、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 |