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

2024-09-28 03:10:34

我测试过很多遍,想要通过a标签的形式来直接点击url下载文件并重命名但是都失败了,最终只能下载却不能重命名所以换了java后台来修改名字.以下代码

我做的网页是点击文件直接下载

直接下载下来了,一开始的文件名是上传到oss时以id命名的名字,现在下载的时候想改名,遇到了问题,所以写了这篇博客

首先是后台代码

/**
  * 附件下载
  * <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代码

//下载和预览
  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实现点击按钮下载文件功能

项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. <div class="btns"> <el-button size="mini" type="primary" @click="$router.push(`/portal/${item.id}/detail`)">查看软件</el-button> <el-lin
Vue.js上传图片到阿里云OSS存储的方法示例

如何在VueJS使用阿里云存储上传图片? 什么是OSS呢? 其实按照官网的解释就是->>阿里云对象存储服务(Object Storage Service) 在实际开发中,公司可能会用到OSS随时来存储一些数据,比如像文本.图片.音频和视频等在内的各种非结构化数据文件,恰好,在做项目的时候,刚好用到了OSS存储,对于我这个萌新,从来没用过,那么我们先来看看文档,看看是怎么一回事~看看前端在VueJS的环境下是如何上传OSS的 (1)首先,打开官网-----https://www.aliyun.c
Vue自定义指令结合阿里云OSS优化图片的实现方法

图片往往在加载前端项目中占大头,如何既不损失图片质量,又提升加载速度呢? 根据显示设备pixelRatio和元素宽高来显示合适图片略微压缩图片质量使用webp 注册全局自定义指令 Vue.directive('img-condense', { bind: (el, binding, vnode) => { let src = el.getAttribute('src') let newSrc = compressImg(src, el) el.setAttribute('src', newS
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

需求点击导出下载表格对应的excel文件在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) r
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

我测试过很多遍,想要通过a标签的形式来直接点击url下载文件并重命名但是都失败了,最终只能下载却不能重命名所以换了java后台来修改名字.以下代码我做的网页是点击文件直接下载直接下载下来了,一开始的文件名是上传到oss时以id命名的名字,现在下载的时候想改名,遇到了问题,所以写了这篇博客首先是后台代码 /** * 附件下载 * <p> * * @param param * @return ResponseDTO */ @PostMapping(value = "/downl
解决阿里云OSS使用URL无法访问图片的两种方法

一.问题概述: 1.使用URL访问OSS存储的图片时显示XML代码 2.使用URL访问OSS存储的图片时自动下载二.解决方式: 如果大家对HTTP头部内容不清晰的可以去百度了解一下再看解决问题一: 问题一出现的原因:因为在OSS的Bucket权限设置为私有解决方式:将Bucket权限设置为公共读即可.但是我猜你之后多半会遇到第二个问题,那么就来解决第二个问题. 解决问题二: 问题二出现的原因:没有对HTTP头进行设置,但是在阿里云2020年新发布的通知中需要自定义域名,使用默认域名时为下载
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例

之前从没接触过Yii,借助的各方资源来做的这个整合阿里云OSS的SDK上传图片实例,如果有不正之处请指出! 前面参照了weinirumo 的介绍,大家可以自行去查看. 好了,下面开始进入主题: 准备工作:需要使用composer执行命令,如果没有安装composer的需要提前安装,参考文档:composer安装流程 1.项目目录结构我使用的是基础版,只有后台目录,请自行对照自己的项目目录结构,会用到以下的几个目录: 2.在项目根目录下运行cmd命令 3.执行composer命令切换到中国国内
yii2.0整合阿里云oss上传单个文件的示例

上一篇文章已经介绍了如何整合阿里云oss,这一篇主要介绍上传文件到阿里云oss. 主要思路:首先文件要上传到服务器,然后把服务器里边的文件传到阿里云oss,成功以后就把文件信息写入数据库,失败了就删除服务器的文件. 主要步骤: 0 介绍几个oss的概念. accessKeyId ==>> 可以理解为访问阿里云oss的账号 accessKeySecret ==>> 可以理解为访问阿里云oss的密码 bucket ==>> 可以理解为文件在保存的根
yii2.0整合阿里云oss的示例代码

主要思路,首先用composer下载阿里云oss的php sdk,然后自定义一个组件,就能够在全局调用阿里云oss了. 具体步骤如下: 1 到阿里云官网找到php sdk,网址为https://help.aliyun.com/document_detail/32099.html?spm=5176.87240.400427.40.s8EbEH 2 使用composer安装,在项目目录下(basic/)输入: composer require aliyuncs/oss-sdk-php 安装完成以后,
React实现阿里云OSS上传文件的示例

简介阿里云 OSS 是阿里云提供的海量.安全.低成本.高可靠的云存储服务,提供 99.9999999999%的数据可靠性(号称).能够使用 RESTful API 可以在互联网任何位置存储和访问,支持容量和处理能力弹性扩展. 基本术语 1.bucket :类似本地的一个文件夹 2.object : oss 存储数据的基本单元,类似本地的一个文件. 3.region:oss 存储的数据中心所在区域 4.Endpoint:oss 对外服务的访问域名,oss 以 http api 提供服务,不同
Android 阿里云OSS文件上传的实现示例

估计有小伙伴看到阿里云oss的api文档十脸懵逼了,啊哈哈哈,接下来博主就来拯救你了,看完觉得好的就关注博主吧,么么么么么哒!!! 想要自己研究阿里云oss的,博主开启传送门给你:阿里云oss 一.项目导入阿里云oss的SDK 方式1:在build文件添加依赖(博主和官方一致推荐) dependencies { //阿里云oss implementation 'com.aliyun.dpa:oss-android-sdk:+' } 方式2:源码编译jar包源码传送门:官方阿里云oss源码二.
使用阿里云OSS的服务端签名后直传功能的流程分析

网站一般都会有上传功能,而对象存储服务oss是一个很好的选择.可以快速的搭建起自己的上传文件功能. 该文章以使用阿里云的OSS功能为例,记录如何在客户端使用阿里云的对象存储服务. 服务端签名后直传背景采用JavaScript客户端直接签名(参见JavaScript客户端签名直传)时,AccessKey ID和AcessKey Secret会暴露在前端页面,因此存在严重的安全隐患.因此,OSS提供了服务端签名后直传的方案. 流程介绍流程如下图所示: 本示例中,Web端向服务端请求签名,然后直
python 阿里云oss实现直传签名与回调验证的示例方法

签名 import base64 import json import time from datetime import datetime import hmac from hashlib import sha1 access_key_id = '' # 请填写您的AccessKeySecret. access_key_secret = '' # host的格式为 bucketname.endpoint ,请替换为您的真实信息. host = '' # callback_url为上传回调服务
laravel 实现阿里云oss文件上传功能的示例

1.定义路由 // 阿里云文件储存 Route::group(['prefix'=>'aliyun'], function(){ Route::get('sign', 'AliyunController@sign'); }); 2.编写 controller 层 /** * 返回OSS的签名验证 * @return JSON 签名信息 */ public function sign(Request $request) { //初始化一下必要的请求数据 $id = 'xxx'; //AccessK

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

相关推荐

随机推荐