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中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 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生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Flask之请求钩子的实现
2018/12/23 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
德国苹果商店:MacTrade
2020/05/18 全球购物
民政局离婚协议书范本
2014/10/20 职场文书
获奖感言范文
2015/07/31 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
赡养老人协议书范本
2015/08/06 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
汉语拼音教学反思
2016/02/22 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python