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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
对javascript继承的理解
2016/10/11 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
python对html过滤处理的方法
2018/10/21 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
大学生优秀自荐信范文
2014/02/25 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
银行金融服务方案
2014/06/11 职场文书
房屋出租委托书格式
2014/09/23 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python