ここにディレクトリのタイトルを書きます
プロジェクトのシナリオ
バックエンドは、ファイル ストリーミングを使用して、ファイル情報をフロントエンドに送信します。フロントエンドは、対応するストリーム情報を受信し、対応する操作を実行する必要があります。たとえば、画像や 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ダウンロード時のファイル形式
| ファイル形式 | タイプタイプ |
|---|---|
| aac | オーディオ/AAC |
| .abw | アプリケーション/x-abiword |
| .avi | ビデオ/x-msvideo |
| .azw | アプリケーション/vnd.amazon.ebook |
| 。置き場 | アプリケーション/オクテットストリーム |
| .bmp | 画像/bmp |
| .bz | アプリケーション/x-bzip |
| .bz2 | アプリケーション/x-bzip2 |
| .csh | アプリケーション/x-csh |
| .css | テキスト/CSS |
| .csv | テキスト/CSV |
| .doc | アプリケーション/msword |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .eot | アプリケーション/vnd.ms-fontobject |
| .epub | アプリケーション/epub+zip |
| .gif | 画像/gif |
| .htm/.html | テキスト/html |
| .ico | 画像/vnd.microsoft.icon |
| .ics | テキスト/カレンダー |
| .jar | アプリケーション/java-アーカイブ |
| .jpeg/.jpg | 画像/jpeg |
| .js | テキスト/JavaScript |
| .json | アプリケーション/json |
| .jsonld | アプリケーション/ld+json |
| .mid/.midi | オーディオ/MIDI オーディオ/X-MIDI |
| .mjs | テキスト/JavaScript |
| .mp3 | オーディオ/mpeg |
| .mpeg | ビデオ/mpeg |
| .mpkg | アプリケーション/vnd.apple.installer+xml |
| .odp | application/vnd.oasis.opendocument.presentation |
| .ods | アプリケーション/vnd.oasis.opendocument.spreadsheet |
| .odt | アプリケーション/vnd.oasis.opendocument.text |
| .oga | オーディオ/OG |
| .ogv | ビデオ/OG |
| .ogx | アプリケーション/OGG |
| .otf | フォント/OTF |
| .png | 画像/png |
| 申請書/PDF | |
| .ppt | アプリケーション/vnd.ms-powerpoint |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
| .rar | application/x-rar-compressed |
| .rtf | アプリケーション/rtf |
| .svg | 画像/SVG+XML |
| .swf | アプリケーション/x-shockwave-フラッシュ |
| 。タール | アプリケーション/x-tar |
| .tif/.tiff | 画像/TIFF |
| .ttf | フォント/ttf |
| 。TXT | テキスト/プレーン |
| .vsd | アプリケーション/vnd.visio |
| .wav | オーディオ/wav |
| 。ウェブ | オーディオ/WebM |
| .webm | ビデオ/ウェブサイト |
| .webp | 画像/ウェブサイト |
| .woff | フォント/woff |
| .woff2 | フォント/woff2 |
| .xhtml | アプリケーション/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 |