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表单验证之禁止input输入框输入空格
Dec 03 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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连接mssql数据库的几种方法
2013/02/21 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
详解jQuery中的easyui
2018/09/02 jQuery
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python读取xml文件方法解析
2020/08/04 Python
Python 远程开关机的方法
2020/11/18 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
简单说下OSPF的操作过程
2014/08/13 面试题
答辩状格式范本
2015/05/22 职场文书
交通处罚决定书
2015/06/24 职场文书
消防安全主题班会
2015/08/12 职场文书