Vue通過(guò)阿里云oss的url連接直接下載文件并修改文件名的方法
我測(cè)試過(guò)很多遍,想要通過(guò)a標(biāo)簽的形式來(lái)直接點(diǎn)擊url下載文件并重命名但是都失敗了,最終只能下載卻不能重命名 所以 換了java后臺(tái)來(lái)修改名字.以下代碼

我做的網(wǎng)頁(yè)是點(diǎn)擊文件直接下載

直接下載下來(lái)了,一開始的文件名是上傳到oss時(shí)以id命名的名字,現(xiàn)在下載的時(shí)候想改名,遇到了問題,所以寫了這篇博客
首先是后臺(tái)代碼

/**
* 附件下載
* <p>
*
* @param param
* @return ResponseDTO
*/
@PostMapping(value = "/download")
public void downloadFile(@RequestParam Map<String, Object> param, HttpServletResponse response) throws Exception {
String url1 = param.get("url").toString();
URL url = new URL(url1);
URLConnection conn = url.openConnection();
InputStream inputStream = conn.getInputStream();
response.reset();
response.setContentType(conn.getContentType());
//純下載方式 文件名應(yīng)該編碼成UTF-8
response.setHeader("Content-Disposition",
"attachment; filename=" + URLEncoder.encode(param.get("name").toString(), "UTF-8"));
byte[] buffer = new byte[1024];
int len;
OutputStream outputStream = response.getOutputStream();
while ((len = inputStream.read(buffer)) > 0) {
outputStream.write(buffer, 0, len);
}
inputStream.close();
}
代碼里面的 url 需要事先 去阿里云獲取,我因?yàn)榍岸松蟼鞯臅r(shí)候 獲取到了url就直接傳到后臺(tái)用了.
前端vue代碼

//下載和預(yù)覽
handlePreview(file) {
if (file.type == 'png' || file.type == 'jpg') {
this.imageUrl = file.url;
this.imageDetail = true;
} else {
var form = document.createElement("form");
document.body.appendChild(form);
form.method = "post";
form.appendChild(this.generateHideElement('url',file.url));
form.appendChild(this.generateHideElement('name',file.name));
form.action = "接口地址"http:// 路由地址+接口地址
form.submit();
}
},
generateHideElement(name, value) {
var tempInput = document.createElement("input");
tempInput.type = "hidden";
tempInput.name = name;
tempInput.value = value;
return tempInput;
},
好了這就完了,很簡(jiǎn)單的一段代碼, 我也是剛學(xué)vue歡迎大佬指點(diǎn)
到此這篇關(guān)于Vue通過(guò)阿里云oss的url連接直接下載文件并修改文件名的方法的文章就介紹到這了,更多相關(guān)vue 阿里云oss下載文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
利用nodeJS+vue圖片上傳實(shí)現(xiàn)更新頭像的過(guò)程
Vue是一套構(gòu)建用戶界面的框架,最近工作中遇到了一個(gè)需求,需要做一個(gè)更新頭像的通能,下面這篇文章主要給大家介紹了關(guān)于利用nodeJS+vue圖片上傳的相關(guān)資料,需要的朋友可以參考下2022-04-04
vuex?mutation?action同級(jí)調(diào)用方式
這篇文章主要介紹了vuex?mutation?action同級(jí)調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03
SpringBoot+Vue3實(shí)現(xiàn)文件的上傳和下載功能
上傳文件和下載文件是我們平時(shí)經(jīng)常用到的功能,接下來(lái)就讓我們用SpringBoot,Vue3和ElementPlus組件實(shí)現(xiàn)文件的上傳和下載功能吧,感興趣的朋友跟隨小編一起看看吧2023-01-01
vue使用driver.js完成頁(yè)面引導(dǎo)功能的示例詳解
在Vue中,driver.js通常是指用于實(shí)現(xiàn)用戶引導(dǎo)和教程功能的JavaScript庫(kù),它可以幫助開發(fā)者在應(yīng)用程序中創(chuàng)建交互式的引導(dǎo)和教程,以引導(dǎo)用戶了解應(yīng)用程序的不同功能和界面,本文就簡(jiǎn)單的給大家介紹一下vue如何使用driver.js完成頁(yè)面引導(dǎo)功能2023-08-08
vue2.5.2使用http請(qǐng)求獲取靜態(tài)json數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了vue2.5.2使用http請(qǐng)求獲取靜態(tài)json數(shù)據(jù)的實(shí)例代碼,需要的朋友可以參考下2018-02-02
vue中使用window.open()參數(shù)示例詳解
這篇文章主要介紹了vue中使用window.open()參數(shù)詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
Vue3-新特性defineOptions和defineModel示例詳解
在Vue3.3中新引入了defineOptions宏主要是用來(lái)定義Option API的選項(xiàng),可以用defineOptions定義任意的選項(xiàng),props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧2023-11-11
vue插件開發(fā)之使用pdf.js實(shí)現(xiàn)手機(jī)端在線預(yù)覽pdf文檔的方法
這篇文章主要介紹了vue插件開發(fā)之使用pdf.js實(shí)現(xiàn)手機(jī)端在線預(yù)覽pdf文檔的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07

