欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2文件流下載成功后文件格式錯(cuò)誤、打不開(kāi)及內(nèi)容缺失的解決方法

 更新時(shí)間:2023年04月27日 10:37:11   作者:Salt_NaCl  
使用Vue時(shí)我們前端如何處理后端返回的文件流,下面這篇文章主要給大家介紹了關(guān)于vue2文件流下載成功后文件格式錯(cuò)誤、打不開(kāi)及內(nèi)容缺失的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

項(xiàng)目場(chǎng)景

后端采用文件流的方式將文件信息發(fā)送給前端,前端需要接收相應(yīng)的流信息做出對(duì)應(yīng)的操作,如接收到圖片、pdf將進(jìn)行預(yù)覽模式,將接收到壓縮包形式的則進(jìn)行文件下載。后端對(duì)相應(yīng)的文件進(jìn)行不同的傳輸方式進(jìn)行傳輸,前端則需要接收相應(yīng)的信息并進(jìn)行操作。

問(wèn)題描述

當(dāng)收到圖片、pdf則可以正常的進(jìn)行操作,當(dāng)接收到壓縮包文件流時(shí)候可以正常下載,但是下載后,下載的文件損壞了。

原因分析

由于文件不同,所以接收方式也是有區(qū)別的,普通的圖片、pdf可以采用日常的請(qǐng)求方式去請(qǐng)求,而壓縮包的請(qǐng)求需要加上接收數(shù)據(jù)格式responseType:為blob,默認(rèn)的responseType為""。

解決方案

1、圖片的解決方式

export const getFileImg = row => {
    return request({
        url: '/api/blade-resource/oss/endpoint/get-file-secret',	//請(qǐng)求路徑
        method: 'get',	//請(qǐng)求模式
        params: row,	//請(qǐng)求參數(shù)
    })
}

2、文件流的解決方式

export const getFileZip = row => {
    return request({
        url: '/api/blade-resource/oss/endpoint/get-file-secret',	//請(qǐng)求路徑
        method: 'get',	//請(qǐng)求模式
        params: row,	//請(qǐng)求參數(shù)
        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下載時(shí)的文件格式

文件格式type類型
aacaudio/aac
.abwapplication/x-abiword
.avivideo/x-msvideo
.azwapplication/vnd.amazon.ebook
.binapplication/octet-stream
.bmpimage/bmp
.bzapplication/x-bzip
.bz2application/x-bzip2
.cshapplication/x-csh
.csstext/css
.csvtext/csv
.docapplication/msword
.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document
.eotapplication/vnd.ms-fontobject
.epubapplication/epub+zip
.gifimage/gif
.htm/.htmltext/html
.icoimage/vnd.microsoft.icon
.icstext/calendar
.jarapplication/java-archive
.jpeg/.jpgimage/jpeg
.jstext/javascript
.jsonapplication/json
.jsonldapplication/ld+json
.mid/.midiaudio/midi audio/x-midi
.mjstext/javascript
.mp3audio/mpeg
.mpegvideo/mpeg
.mpkgapplication/vnd.apple.installer+xml
.odpapplication/vnd.oasis.opendocument.presentation
.odsapplication/vnd.oasis.opendocument.spreadsheet
.odtapplication/vnd.oasis.opendocument.text
.ogaaudio/ogg
.ogvvideo/ogg
.ogxapplication/ogg
.otffont/otf
.pngimage/png
.pdfapplication/pdf
.pptapplication/vnd.ms-powerpoint
.pptxapplication/vnd.openxmlformats-officedocument.presentationml.presentation
.rarapplication/x-rar-compressed
.rtfapplication/rtf
.svgimage/svg+xml
.swfapplication/x-shockwave-flash
.tarapplication/x-tar
.tif/.tiffimage/tiff
.ttffont/ttf
.txttext/plain
.vsdapplication/vnd.visio
.wavaudio/wav
.webaaudio/webm
.webmvideo/webm
.webpimage/webp
.wofffont/woff
.woff2font/woff2
.xhtmlapplication/xhtml+xml
.xlsapplication/vnd.ms-excel
.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlapplication/xml 代碼對(duì)普通用戶來(lái)說(shuō)不可讀 (RFC 3023, section 3)text/xml 代碼對(duì)普通用戶來(lái)說(shuō)可讀 (RFC 3023, section 3)
.xulapplication/vnd.mozilla.xul+xml
.zipapplication/zip
.3gpvideo/3gpp audio/3gpp(若不含視頻)
.3g2video/3gpp2 audio/3gpp2(若不含視頻)
.7zapplication/x-7z-compressed

總結(jié)

到此這篇關(guān)于vue2文件流下載成功后文件格式錯(cuò)誤、打不開(kāi)及內(nèi)容缺失解決的文章就介紹到這了,更多相關(guān)vue2文件流下載后文件格式錯(cuò)誤內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式

    vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式

    在看element-ui的源碼的時(shí)候,注意到源碼里面有很多地方使用provide和inject的屬性,本文主要介紹了vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式,分享給大家,感興趣的可以了解一下
    2021-05-05
  • 深入理解Vue的插件機(jī)制與install詳細(xì)

    深入理解Vue的插件機(jī)制與install詳細(xì)

    這篇文章主要介紹的是深入理解Vue的插件機(jī)制與install,文章主要是講解install函數(shù)可以做些什么、install內(nèi)部是怎么實(shí)現(xiàn)的、 Vuex,Vue-Router插件在install期間到底干了什么,需要的小伙伴可以參考一下
    2021-09-09
  • 詳解從零搭建 vue2 vue-router2 webpack3 工程

    詳解從零搭建 vue2 vue-router2 webpack3 工程

    本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-11
  • vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果

    vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果,右側(cè)顯示對(duì)應(yīng)內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • Vue+Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼

    Vue+Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼

    本篇文章主要介紹了Vue+Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-01
  • Vue 購(gòu)物車(chē)案例練習(xí)

    Vue 購(gòu)物車(chē)案例練習(xí)

    這篇文章主要給大家分享關(guān)于Vue 購(gòu)物車(chē)案例的小練習(xí),文章個(gè)悲劇購(gòu)物車(chē)為標(biāo)題需求利用HTML代碼實(shí)現(xiàn)整個(gè)過(guò)程,需要的朋友可以參考一下文章的具體內(nèi)容
    2021-10-10
  • vue原生input輸入框原理剖析

    vue原生input輸入框原理剖析

    這篇文章主要為大家介紹了vue原生input輸入框原理剖析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • Vue中的生命周期詳細(xì)解讀

    Vue中的生命周期詳細(xì)解讀

    這篇文章主要介紹了Vue中的生命周期詳細(xì)解讀,每個(gè) Vue 組件實(shí)例在創(chuàng)建時(shí)都需要經(jīng)歷一系列的初始化步驟,比如設(shè)置好數(shù)據(jù)偵聽(tīng),編譯模板,掛載實(shí)例到 DOM,以及在數(shù)據(jù)改變時(shí)更新 DOM,需要的朋友可以參考下
    2023-08-08
  • Vue.js實(shí)現(xiàn)圖片的隨意拖動(dòng)方法

    Vue.js實(shí)現(xiàn)圖片的隨意拖動(dòng)方法

    下面小編就為大家分享一篇Vue.js實(shí)現(xiàn)圖片的隨意拖動(dòng)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • Vue關(guān)于Element UI中的文本域換行問(wèn)題

    Vue關(guān)于Element UI中的文本域換行問(wèn)題

    這篇文章主要介紹了Vue關(guān)于Element UI中的文本域換行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評(píng)論