Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法


Posted in Vue.js onDecember 25, 2020

我测试过很多遍,想要通过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下载文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
vue使用require.context实现动态注册路由
Dec 25 #Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 #Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 #Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 #Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 #Vue.js
vue3使用vue-count-to组件的实现
Dec 25 #Vue.js
vue+openlayers绘制省市边界线
Dec 24 #Vue.js
You might like
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
基于vue实现分页效果
2017/11/06 Javascript
深入研究React中setState源码
2017/11/17 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python中内建函数的简单用法说明
2016/05/05 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
python定向爬取淘宝商品价格
2018/02/27 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python 学习教程之networkx
2019/04/15 Python
python Gabor滤波器讲解
2020/10/26 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
校园文化建设方案
2014/02/03 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
法人代表资格证明书
2015/06/18 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书