前端Vue通過Minio返回的URL下載文件實(shí)現(xiàn)方法
更新時(shí)間：2024年07月05日 09:18:15 作者：諵溪丶
Minio是一個(gè)靈活、高性能、開源的對(duì)象存儲(chǔ)解決方案,適用于各種存儲(chǔ)需求,并可以與云計(jì)算、容器化、大數(shù)據(jù)和應(yīng)用程序集成,這篇文章主要給大家介紹了關(guān)于前端Vue通過Minio返回的URL下載文件實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
最近在使用下載Minio實(shí)現(xiàn)下載文件時(shí)遇到的一些問題，前端直接點(diǎn)擊后端返回的URL不可以調(diào)用下載而是直接預(yù)覽，下面將我實(shí)現(xiàn)的方法分享：
1、數(shù)據(jù)庫(kù)File表
2、通過文件id查詢相關(guān)數(shù)據(jù)
FileController接口
FileServiceImpl實(shí)現(xiàn)類
3、前端這樣操作：
const fileId = '1783377440079638530'
downloadFile(fileId).then(res => {
if (res.code === '0000') {
// window.open(res.data)
const downloadLink = document.createElement('a')
// 將地址url轉(zhuǎn)成blob地址
fetch(res.data.url).then(res => res.blob()).then(blob => {
downloadLink.href = URL.createObjectURL(blob)
// 下載文件的名稱
downloadLink.download = res.data.fileName
document.body.appendChild(downloadLink)
downloadLink.click()
// 清除 占用的緩存資源
window.URL.revokeObjectURL(downloadLink.href)
document.body.removeChild(downloadLink)
})
}
})
4、點(diǎn)擊相應(yīng)按鈕即可彈出下載框：下載文件、保存到電腦相應(yīng)位置。
附：Minio中文路徑造成無法下載問題解決辦法
Minio中文路徑造成無法下載問題.net core解決辦法
//后端需要對(duì)含有中文的路徑進(jìn)行加密 var encodedFilePath= Encoding.UTF8.GetString(Convert.FromBase64String(filePath)); var lastFilePath = HttpUtility.UrlDecode(encodedFilePath);
// 前端使用TS, 對(duì)url 進(jìn)行編碼 encodeURIComponent(imagePath)
總結(jié)
到此這篇關(guān)于前端Vue通過Minio返回的URL下載文件實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue Minio返回URL下載文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element-ui中el-table不顯示數(shù)據(jù)的問題解決
這篇文章主要介紹了element-ui中el-table不顯示數(shù)據(jù)的問題解決,這是最近在做列表首頁時(shí)遇到的一個(gè)問題,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.Draggable拖拽功能配置使用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
在實(shí)際項(xiàng)目開發(fā)中,幾乎每個(gè)組件中都會(huì)用到?axios?發(fā)起數(shù)據(jù)請(qǐng)求,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Vue3全局配置axios的兩種方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
Vue el-upload單圖片上傳功能實(shí)現(xiàn)
這篇文章主要介紹了Vue el-upload單圖片上傳功能實(shí)現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
本篇文章主要介紹了Vue中如何實(shí)現(xiàn)輪播圖的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
Vuex unknown action type報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Vuex unknown action type報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
本文講述了"v-deep"深度選擇器被廢棄的情況,作者提醒讀者更新知識(shí)庫(kù),避免誤導(dǎo)他人,深度選擇器是HTML5的新屬性,用于實(shí)現(xiàn)組件私有化和防止樣式污染,如果想讓樣式中的一個(gè)選擇器作用得更深,可以使用深度選擇器,但現(xiàn)在,以前的寫法已不再支持,需要調(diào)整方法2024-10-10
vue生成token保存在客戶端localStorage中的方法
本篇文章主要介紹了vue生成token保存在客戶端localStorage中的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue+xlsx實(shí)現(xiàn)表格的導(dǎo)入導(dǎo)出功能
這篇文章主要介紹了vue+xlsx實(shí)現(xiàn)表格的導(dǎo)入導(dǎo)出功能,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
本篇文章主要介紹了VUE頁面中加載外部HTML的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09