一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - vue.js - Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法

Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法

2021-12-20 16:12小白艱辛路 vue.js

這篇文章主要介紹了Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

我測試過很多遍,想要通過a標簽的形式來直接點擊url下載文件并重命名但是都失敗了,最終只能下載卻不能重命名 所以 換了java后臺來修改名字.以下代碼

Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法

我做的網頁是點擊文件直接下載

Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法

直接下載下來了,一開始的文件名是上傳到oss時以id命名的名字,現在下載的時候想改名,遇到了問題,所以寫了這篇博客

首先是后臺代碼

Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法

/**
  * 附件下載
  * <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());
   //純下載方式 文件名應該編碼成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 需要事先 去阿里云獲取,我因為前端上傳的時候 獲取到了url就直接傳到后臺用了.

前端vue代碼

Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法

//下載和預覽
  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 = "接口地址"// 路由地址+接口地址
   form.submit();
  }
  },
  generateHideElement(name, value) {
  var tempInput = document.createElement("input");
  tempInput.type = "hidden";
  tempInput.name = name;
  tempInput.value = value;
  return tempInput;
  },

好了這就完了,很簡單的一段代碼, 我也是剛學vue歡迎大佬指點

到此這篇關于Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法的文章就介紹到這了,更多相關vue 阿里云oss下載文件內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家!

原文鏈接:https://blog.csdn.net/weixin_45861283/article/details/111597661

延伸 · 閱讀

精彩推薦
  • vue.jsVue2.x-使用防抖以及節流的示例

    Vue2.x-使用防抖以及節流的示例

    這篇文章主要介紹了Vue2.x-使用防抖以及節流的示例,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下...

    Kyara6372022-01-25
  • vue.jsVue項目中實現帶參跳轉功能

    Vue項目中實現帶參跳轉功能

    最近做了一個手機端系統,其中遇到了父頁面需要攜帶參數跳轉至子頁面的問題,現已解決,下面分享一下實現過程,感興趣的朋友一起看看吧...

    YiluRen丶4302022-03-03
  • vue.jsVue2.x 項目性能優化之代碼優化的實現

    Vue2.x 項目性能優化之代碼優化的實現

    這篇文章主要介紹了Vue2.x 項目性能優化之代碼優化的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋...

    優小U9632022-02-21
  • vue.js詳解vue 表單綁定與組件

    詳解vue 表單綁定與組件

    這篇文章主要介紹了vue 表單綁定與組件的相關資料,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下...

    Latteitcjz6432022-02-12
  • vue.js用vite搭建vue3應用的實現方法

    用vite搭建vue3應用的實現方法

    這篇文章主要介紹了用vite搭建vue3應用的實現方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下...

    Asiter7912022-01-22
  • vue.jsVue中引入svg圖標的兩種方式

    Vue中引入svg圖標的兩種方式

    這篇文章主要給大家介紹了關于Vue中引入svg圖標的兩種方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的...

    十里不故夢10222021-12-31
  • vue.js梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    看過很多人講vue的生命周期,但總是被繞的云里霧里,尤其是自學的同學,可能js的基礎也不是太牢固,聽起來更是吃力,那我就已個人之淺見,以大白話...

    CRMEB技術團隊7992021-12-22
  • vue.jsVue多選列表組件深入詳解

    Vue多選列表組件深入詳解

    這篇文章主要介紹了Vue多選列表組件深入詳解,這個是vue的基本組件,有需要的同學可以研究下...

    yukiwu6752022-01-25
主站蜘蛛池模板: 国产福利不卡一区二区三区 | 国产久视频 | 国产第7页| 四虎免费在线观看 | 高h肉爽文农民工 | 超碰97| 国产一区二区三区毛片 | 精品蜜臀AV在线天堂 | 国产精品亚洲精品青青青 | 99久久国语露脸精品国产 | 猫咪av | 午夜视频一区二区三区 | 日本草草视频在线观看 | 好大好硬视频 | 天天综合色天天综合色sb | 精品一区二区高清在线观看 | 欧美男人天堂 | 男同激情视频 | 国产九九在线观看播放 | free chinese 国产精品 | 色综合网天天综合色中文男男 | 国产成人小视频 | 免费黄色片网站 | 菠萝视频在线完整版 | 日日免费视频 | 幸福草电视剧演员表介绍 | 四神集团1涨奶是第几章 | 91精品国产91热久久p | 成人3p视频免费 | 阿 好深 快点 老师受不了 | 国产成人99久久亚洲综合精品 | jizzjizz3d动漫| 国产在线视频欧美亚综合 | 日本护士xxxx爽爽爽 | 亚洲另类老妇videos | 男同桌脱我奶罩吸我奶作文 | 国产精品久久国产精品99盘 | 成人国产一区 | 久草在线精彩免费视频 | 成人在线一区二区 | 成人亚洲欧美综合 |