最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

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

項目場景

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

問題描述

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

原因分析

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

解決方案

1、圖片的解決方式

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

2、文件流的解決方式

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

文件格式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 代碼對普通用戶來說不可讀 (RFC 3023, section 3)text/xml 代碼對普通用戶來說可讀 (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文件流下載成功后文件格式錯誤、打不開及內(nèi)容缺失解決的文章就介紹到這了,更多相關(guān)vue2文件流下載后文件格式錯誤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue+elementUI面包屑組件封裝方法詳解

    vue+elementUI面包屑組件封裝方法詳解

    這篇文章主要為大家詳細(xì)介紹了vue+elementUI面包屑組件封裝方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 在Vue中使用this.$store或者是$route一直報錯的解決

    在Vue中使用this.$store或者是$route一直報錯的解決

    今天小編就為大家分享一篇在Vue中使用this.$store或者是$route一直報錯的解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue如何通過props方式在子組件中獲取相應(yīng)的對象

    vue如何通過props方式在子組件中獲取相應(yīng)的對象

    這篇文章主要介紹了vue如何通過props方式在子組件中獲取相應(yīng)的對象,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue ElementUi同時校驗多個表單(巧用new promise)

    Vue ElementUi同時校驗多個表單(巧用new promise)

    這篇文章主要介紹了巧用new promise實現(xiàn)Vue ElementUi同時校驗多個表單功能,實現(xiàn)的方法有很多種,本文給大家?guī)淼氖且环N比較完美的方案,需要的朋友可以參考下
    2018-06-06
  • Vue.js數(shù)據(jù)綁定之data屬性

    Vue.js數(shù)據(jù)綁定之data屬性

    這篇文章主要為大家詳細(xì)介紹了Vue.js數(shù)據(jù)綁定之data屬性,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • 解決Vue+SpringBoot+Shiro跨域問題

    解決Vue+SpringBoot+Shiro跨域問題

    本文將結(jié)合實例代碼,解決Vue+SpringBoot+Shiro跨域問題,相信大家剛開始做都會遇到這個問題,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-06-06
  • vue3 + ts + pnpm:nprogress / 頁面頂部進(jìn)度條效果實現(xiàn)

    vue3 + ts + pnpm:nprogress / 頁

    NProgress是一款輕量級的進(jìn)度條庫,主要用于網(wǎng)頁頂部顯示頁面加載或運行進(jìn)度,它易于安裝和使用,并提供良好的視覺效果,NProgress也可以與VueRouter結(jié)合使用,通過導(dǎo)航守衛(wèi)在路由跳轉(zhuǎn)時自動顯示和隱藏進(jìn)度條,該庫的使用提高了用戶對網(wǎng)頁加載狀態(tài)的感知,優(yōu)化了用戶體驗
    2024-09-09
  • Vue.js?的計算屬性和偵聽器詳解(提升數(shù)據(jù)處理與交互的關(guān)鍵工具)

    Vue.js?的計算屬性和偵聽器詳解(提升數(shù)據(jù)處理與交互的關(guān)鍵工具)

    在Vue.js開發(fā)中,計算屬性與偵聽器是極為關(guān)鍵的特性,它們極大地提升了數(shù)據(jù)處理與交互邏輯實現(xiàn)的便捷性和高效性,本文給大家介紹Vue.js?的計算屬性和偵聽器:提升數(shù)據(jù)處理與交互的關(guān)鍵工具,感興趣的朋友一起看看吧
    2025-04-04
  • fullcalendar日程管理插件月份切換回調(diào)處理方案

    fullcalendar日程管理插件月份切換回調(diào)處理方案

    這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-03-03
  • 詳解Vue3子組件向父組件傳遞消息

    詳解Vue3子組件向父組件傳遞消息

    這篇文章主要介紹了Vue3子組件向父組件傳遞消息,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07

最新評論

乌什县| 土默特右旗| 武邑县| 辽阳县| 甘肃省| 沁阳市| 灵宝市| 安福县| 牙克石市| 夏邑县| 浮山县| 志丹县| 定结县| 格尔木市| 怀仁县| 博兴县| 汽车| 赫章县| 论坛| 陆川县| 台湾省| 洪江市| 凤山县| 奇台县| 稷山县| 高州市| 甘德县| 崇明县| 河东区| 页游| 山丹县| 唐河县| 梅河口市| 田阳县| 澄城县| 丹东市| 河西区| 工布江达县| 赤峰市| 琼中| 舟曲县|