前端、后端上传文件到OSS，简明记录

前端、后端上传文件到OSS，简明记录

上传文件到oss的方式：

**后端上传：**文件先要从页面上传到后端存起来，再通过后端发送到oss，然后后端将存起来的文件删除（当然可以不删）。

**前端上传：**文件通过前端页面直接上传到OSS服务器，不需要传到后端服务器，但是要先从后端获取上传OSS的凭证，然后再上传到OSS。

后端上传

后端上传的方式，官网有现成的sdk，非常简单，导入依赖后，对着代码传送你要上传的文件到后端即可

添加maven依赖

        <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.15.1</version></dependency>

复制下面代码到JUnit中执行了一下，更改对应的endpoint、bucketName等参数，即可执行文件上传到oss，不过对应的accessKey、accessKeySecret参数都存放在环境变量中，这也是阿里云推荐这么操作，为了安全起见以及代码与配置分离。当然你也可以直接在代码中或properties、yml文件中配置。

@Testpublic void testOSSUpload() throws com.aliyuncs.exceptions.ClientException {// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。String endpoint = "https://oss-cn-nanjing.aliyuncs.com";// 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();// 填写Bucket名称，例如examplebucket。String bucketName = "othersitefiles";// 填写Object完整路径，例如exampledir/exampleobject.txt。Object完整路径中不能包含Bucket名称。String objectName = "exampledir/exampleobject.jpg";// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(endpoint, credentialsProvider);try {File file = new File("D:\\Bruce\\dog.jpg");ByteArrayOutputStream bos = new ByteArrayOutputStream();try (InputStream is = new FileInputStream(file)) {byte[] buffer = new byte[1024];int readCount;while ((readCount = is.read(buffer)) != -1) {bos.write(buffer, 0, readCount);}} catch (FileNotFoundException e) {throw new RuntimeException(e);} catch (IOException e) {throw new RuntimeException(e);}ossClient.putObject(bucketName, objectName, new ByteArrayInputStream(bos.toByteArray()));} catch (OSSException oe) {System.out.println("Caught an OSSException, which means your request made it to OSS, "+ "but was rejected with an error response for some reason.");System.out.println("Error Message:" + oe.getErrorMessage());System.out.println("Error Code:" + oe.getErrorCode());System.out.println("Request ID:" + oe.getRequestId());System.out.println("Host ID:" + oe.getHostId());} catch (ClientException ce) {System.out.println("Caught an ClientException, which means the client encountered "+ "a serious internal problem while trying to communicate with OSS, "+ "such as not being able to access the network.");System.out.println("Error Message:" + ce.getMessage());}  finally {if (ossClient != null) {ossClient.shutdown();}}}

因为是在idea中执行的JUnit测试上传，所以环境变量需要再ide中配置。

image-20240401172119410

image-20240401172213302

如果是在idea中运行web项目测试，则可以在ide中配置环境变量，也可以在系统环境变量中进行配置，如果两者都设置了，则优先会从ide中获取配置。

而如果是发布以后的web项目，则就必须在系统环境变量中去设置。

image-20240401172655418

image-20240401172722147

前端上传：

既然要上传到oss，其实就不用上传后端，最好是由前端安全的把文件传到oss，这种操作最为合理。

这是后需要先到阿里云去配置账户与角色

image-20240401173106764

image-20240401173149755

image-20240401173239380

image-20240401173414993

在这里可以得到你新建账户的accessKey与accessSecret，然后给这个用户添加权限

image-20240401173542192

image-20240402000609315

然后再新增角色

image-20240401173731574

image-20240401173745059

image-20240401173805942

image-20240401173849002

image-20240401173904834

image-20240401173926755

为角色也添加权限后，找到AEN的值，在代码中会用到

image-20240401174031115

后端代码：

service:

这里基本把参数都配置到环境变量中了

@Service("fileUploadOSSService")
public class FileUploadOSSServiceImpl implements FileUploadService {private Logger logger = LoggerFactory.getLogger(FileUploadOSSServiceImpl.class);@Overridepublic R getToken(@CurrentUserPC UsersVO usersVO) {try {EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();String region = System.getenv("REGION");String rolearn = System.getenv("ROLEARN");// 初始化默认profile，填入您的AK信息DefaultProfile profile = DefaultProfile.getProfile(region, credentialsProvider.getCredentials().getAccessKeyId(), credentialsProvider.getCredentials().getSecretAccessKey());// 创建DefaultAcsClient实例并初始化IAcsClient client = new DefaultAcsClient(profile);// 创建AssumeRoleRequest请求对象AssumeRoleRequest request = new AssumeRoleRequest();request.setRoleArn(rolearn);request.setRoleSessionName("MySession");// 可选设置会话持续时间，默认为900秒request.setDurationSeconds(900L);// 发起请求并获取响应AssumeRoleResponse response = client.getAcsResponse(request);// 解析并打印临时凭证信息String accessKeyId = response.getCredentials().getAccessKeyId();String accessKeySecret = response.getCredentials().getAccessKeySecret();String securityToken = response.getCredentials().getSecurityToken();String endpoint = System.getenv("OSS_ENDPOINT");String bucket = System.getenv("BUCKET");System.out.println("临时AccessKeyId: " + accessKeyId);System.out.println("临时AccessKeySecret: " + accessKeySecret);System.out.println("临时SecurityToken: " + securityToken);OSSVO ossVO = new OSSVO();ossVO.setAccessKeyId(accessKeyId);ossVO.setAccessKeySecret(accessKeySecret);ossVO.setSecurityToken(securityToken);ossVO.setEndpoint(endpoint);ossVO.setExpiration(response.getCredentials().getExpiration());ossVO.setBucketName(bucket);ossVO.setRegion(region);ossVO.setFileName(RandomUtils.getUUID() + System.currentTimeMillis() + usersVO.getUid());return R.ok().put("data", ossVO);} catch (ClientException e) {e.printStackTrace();logger.error("获取token失败,com.aliyun.oss.ClientException:", e);} catch (ServerException e) {e.printStackTrace();logger.error("获取token失败,ClientException:", e);} catch (com.aliyuncs.exceptions.ClientException e) {e.printStackTrace();logger.error("获取token失败,com.aliyuncs.exceptions.ClientException:", e);}return R.error("获取token失败");}}

image-20240402001642443

BUCKET为Bucket名称
image-20240402001824721

OSS_ACCESS_KEY_ID与OSS_ACCESS_KEY_SECRET则是刚才创建RAM用户的AccessKey ID与 Accesskey Secret

image-20240402002050534

OSS_ENDPOINT为Endpoint

image-20240402002306488

ROLEARN就是在角色那里的ARN值

image-20240402002923551

OSS_SESSION_TOKEN不用管，REGION为地区，一般就是Endpoint中的地区，按理我这里应该对应是cn-nanjing，但是查了下对照表，cn-nanjing的对应REGION应该是cn-hangzhou，所以我这里填的是cn-hangzhou

image-20240402002532426

目前阿里云在中国大陆地区的regionId主要有：

  • cn-hangzhou
  • cn-beijing
  • cn-shanghai
  • cn-qingdao
  • cn-zhangjiakou
  • cn-huhehaote
  • cn-shenzhen
  • cn-chengdu
  • cn-hongkong
  • cn-hangzhou-internal

根据阿里云的官方文档，南京节点（Nanjing）并未单独作为一个regionId列出，而是作为华东2（Hangzhou）的一部分。所以，如果在南京节点使用OSS服务，应该使用cn-hangzhou作为regionId。

controller:
@Api("文件上传")
@RestController
@RequestMapping("/pcApi/fileUpload")
public class FileUploadController {@Autowired@Qualifier("fileUploadOSSService")private FileUploadService fileUploadOSSService;@ApiOperation("获取OSS token")@PostMapping("/getOSSToken")public R getOSSToken(@CurrentUserPC UsersVO usersVO) {return fileUploadOSSService.getToken(usersVO);}}

前端代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><!-- HTML部分 --><input type="file" id="fileInput" accept="image/*" ref="fileInput" @change="uploadFile" /></div></body><script src="js/jquery-1.10.2.min.js"></script><script src="js/vue.min.js"></script><script src="node_modules/ali-oss/dist/aliyun-oss-sdk.min.js"></script><script>var app = new Vue({el: "#app",data: {},created() {},methods: {uploadFile(event) {const file = event.target.files[0];// 获取文件后缀名var fileExtension = file.name.substring(file.name.lastIndexOf('.') + 1);// 转换为小写以便不区分大小写比较fileExtension = fileExtension.toLowerCase();debugger;// 确保文件已选择if (file) {// 上传文件的逻辑const token ="eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjp7InVpZCI6MiwidXNlcm5hbWUiOiJ6aGFuZ2RpIiwidHlwZSI6MX19._ADwwEioEnyV7L_xqPjWZgeR_13ow5uDU01Togtr90I"; // 根据实际情况从存储中获取token// 前端请求后端获取临时凭证$.ajax({url: "http://localhost:8099/pcApi/fileUpload/getOSSToken",dataType: "json",method: "POST",headers: {"token": token},success: function(data) {if (data.code == 0) {console.log(data.data);const credentials = data.data;// 初始化OSS客户端const client = new OSS({region: credentials.region,accessKeyId: credentials.accessKeyId,accessKeySecret: credentials.accessKeySecret,bucket: credentials.bucketName,stsToken: credentials.securityToken,endpoint: credentials.endpoint, // 使用STS提供的EndpointrefreshSTSToken: this.getNewSTSToken,refreshSTSTokenInterval: 300000, // 设置STS Token刷新间隔，单位是毫秒，默认值是300000（即5分钟）});// 开始上传文件try {const result = client.put('weiqingview/'+credentials.fileName + '.' + fileExtension, file);debugger;console.log('Upload successful:', result);} catch (error) {console.error('Failed to upload file:', error);}}}});}},// 在初始化OSS客户端之后定义一个函数用来获取新的STS TokengetNewSTSToken(callback) {$.ajax({url: "http://localhost:8099/pcApi/fileUpload/getOSSToken",dataType: "json",method: "POST",headers: {"token": token // 这里的token应该来自实际的用户认证信息或者存储中的有效token},success: function(data) {if (data.code === 0) {const newCredentials = data.data;callback(null, {accessKeyId: newCredentials.accessKeyId,accessKeySecret: newCredentials.accessKeySecret,securityToken: newCredentials.securityToken});} else {// 处理错误，例如重新获取或其他逻辑console.error('Failed to fetch new STS Token:', data.message);callback(new Error(data.message));}},error: function(xhr, status, err) {// 请求失败处理console.error('Error while fetching new STS Token:', err);callback(err);}});}}});</script>
</html>

对照着需要引入jquery与vue，而aliyun-oss-sdk.min.js需要通过npm 或yarn安装一下，或者引入cdn也行

npm install ali-oss --save
# 或者
yarn add ali-oss

运行

image-20240402003730282

image-20240402003846053

发现图片已经上传到oss

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/294321.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ArcGIS Pro怎么进行挖填方计算

ArcGIS Pro怎么进行挖填方计算

在工程实施之前&#xff0c;我们需要充分利用地形&#xff0c;结合实际因素&#xff0c;通过挖填方计算项目的标高&#xff0c;以达到合理控制成本的目的&#xff0c;这里为大家介绍一下ArcGIS Pro中挖填方计算的方法&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的…
阅读更多...
SpringCloud学习(1)-consul

SpringCloud学习(1)-consul

consul下载安装及使用 1.consul简介 Consul是一种开源的、分布式的服务发现和配置管理工具&#xff0c;能够帮助开发人员构建和管理现代化的分布式系统。它提供了一套完整的功能&#xff0c;包括服务注册与发现、健康检查、KV存储、多数据中心支持等&#xff0c;可以帮助开发人…
阅读更多...
linux shell命令（进程管理、用户管理）

linux shell命令（进程管理、用户管理）

一、进程的概念 主要有两点&#xff1a; 1.进程是一个实体。每一个进程都有它自己的地址空间&#xff0c;一般情况下&#xff0c;包括文本区域&#xff08;text region&#xff09;、数据区域&#xff08;data region&#xff09;和堆栈&#xff08;stack region&#xff09;…
阅读更多...
用Servlet实现一个简单的表白墙

用Servlet实现一个简单的表白墙

1. 准备工作 创建项目,引入依赖...... 将静态页面放到项目中(放在webapp目录下): 当前,这个表白墙页面,已经可以输入内容,点击提交之后也能显示内容,后续后端要做的工作即: ①存档 用户点提交的时候,把刚才输入的内容通过网络传输给服务器,由服务器保存这个数据. ②读档 …
阅读更多...
计算机网络(第八版)-第1章课后习题参考答案

计算机网络(第八版)-第1章课后习题参考答案

计算机网络(第八版)-第1章课后习题参考答案 本文是对自己之前文章的格式化&#xff1a;https://blog.csdn.net/qq_46396470/article/details/132788972?spm1001.2014.3001.5502 T1-01 计算机网络向用户可以提供哪些服务&#xff1f; 连通性和共享 &#xff0c;例如音频&…
阅读更多...
微信小程序开发【从入门到精通】——页面导航

微信小程序开发【从入门到精通】——页面导航

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…
阅读更多...
JavaSE——面向对象高级三（5/5）-泛型方法、泛型的通配符、泛型擦除和注意事项

JavaSE——面向对象高级三（5/5）-泛型方法、泛型的通配符、泛型擦除和注意事项

目录 泛型方法 泛型的通配符 泛型擦除和注意事项 泛型方法 修饰符 <类型变量,类型变量,...> 返回值类型 方法名(形参列表){ } public static <T> void test(T t){} 注意&#xff1a;下面这种不是泛型方法 public E get(int index){return (E) arr[index]; } 具体…
阅读更多...
RTOS中临界区嵌套保护的实现原理（基于RT-Thread）

RTOS中临界区嵌套保护的实现原理（基于RT-Thread）

0 前言 什么是临界区&#xff08;临界段&#xff09;&#xff1f; 裸机编程中由于不涉及线程和线程切换&#xff0c;因此没有临界区这一个概念。在RTOS中由于存在线程切换等场景&#xff0c;便有了临界区这个概念。简单来说&#xff0c;临界区就是不允许被中断的代码区域。什么…
阅读更多...
代码随想录算法训练营第39天|62.不同路径 |63. 不同路径 II

代码随想录算法训练营第39天|62.不同路径 |63. 不同路径 II

代码随想录算法训练营第39天|62.不同路径 |63. 不同路径 II 详细布置 62.不同路径 本题大家掌握动态规划的方法就可以。 数论方法 有点非主流&#xff0c;很难想到。 https://programmercarl.com/0062.%E4%B8%8D%E5%90%8C%E8%B7%AF%E5%BE%84.html 视频讲解&#xff1a;https…
阅读更多...
网络钓鱼升级 Darcula如何窃取用户信息

网络钓鱼升级 Darcula如何窃取用户信息

近日&#xff0c;网络安全领域一种名为 “Darcula” 的网络钓鱼欺诈&#xff08;PhaaS&#xff09;悄然兴起。这种新型钓鱼方式不同于传统的手段&#xff0c;它巧妙地利用了谷歌信息和 iMessage 的富通信服务&#xff08;RCS&#xff09;&#xff0c;成为了网络犯罪分子的新手段…
阅读更多...
dockerfile制作-pytoch+深度学习环境版

dockerfile制作-pytoch+深度学习环境版

你好你好&#xff01; 以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 文档内容docker相关术语docker常用命令容器常用命令根据dockerfile创建容器dokerfile文件内容 docker问题&#xff1a;可能的原因和解决方法示例修改修改后的D…
阅读更多...
vscode调试Unity

vscode调试Unity

文章目录 vscode调试UnityC#环境需求开始调试 Lua添加Debugger环境配置联系.txt文件配置Java环境 添加调试代码断点不生效的问题 vscode调试Unity C# 现在使用vscode调试Unity的C#代码很简单&#xff0c;直接在vscode的EXTENSIONS里面搜索“Unity”&#xff0c;第一个就是&am…
阅读更多...
YOLOv8改进 | 细节涨点篇 | 利用YOLOv8自带的RayTune进行超参数调优

YOLOv8改进 | 细节涨点篇 | 利用YOLOv8自带的RayTune进行超参数调优

一、本文介绍 本文给大家带来的改进机制是利用Ray Tune进行超参数调优，在YOLOv8的项目中目前已经自带了该超参数调优的代码，我们无需进行任何的改动，只需要调用该方法输入我们的一些指令即可，当然了，这些超参数的设置还是比较又学问的，本文的内容也是应群友的需求进行发…
阅读更多...
研发设计人员能力级别定义

研发设计人员能力级别定义

研发设计人员能力&级别定义 1. 源由2. 级别定义3. 级别能力3.1 助理工程师3.1.1 工作内容3.1.2 级别晋升3.1.3 详细描述 3.2 初级工程师3.2.1 工作内容3.2.2 级别晋升3.2.3 详细描述 3.3 高级工程师3.3.1 工作内容3.3.2 级别晋升3.3.3 详细描述 3.4 资深工程师3.4.1 工作内…
阅读更多...
【Entity Framework】EF中的增删改查

【Entity Framework】EF中的增删改查

【Entity Framework】EF中的增删改查 文章目录 【Entity Framework】EF中的增删改查一、概述二、DbContext数据上下文三、EntityState五个状态值四、EF添加数据4.1 EF Add方式4.2 EF 通过改变对象的状态为 Added4.3 调用方sql4.4 调用存储过程 五、EF修改数据5.1 不查询数据库&…
阅读更多...
仿真黑科技EasyGo DeskSim 2022

仿真黑科技EasyGo DeskSim 2022

DeskSim2022的FPGA支持多种solver的混合应用&#xff0c;对于每一种solver可以采用不同的仿真步长&#xff0c;以下图模型为例&#xff0c;模型运行在FPGA上&#xff0c;FPGA解算方式采用的是Power Electronic & FPGA Coder解算&#xff0c;其中电力电子电路部分采用了两种…
阅读更多...
ssm013小型企业办公自动化系统的设计和开发+vue

ssm013小型企业办公自动化系统的设计和开发+vue

小型企业办公自动化系统的设计与实现 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对小型企业办公信息管理混乱&am…
阅读更多...
wps 开发插件

wps 开发插件

官方文档参考wps官方文档参考 1.环境安装 安装wps https://www.wps.cn/ 安装Node.js https://nodejs.org/en 安装代码编辑器 Visual Studio Code https://code.visualstudio.com/ 环境检查-进入cmd查看 node -v2.demo 2.1 demo下载 打开vscode&#xff0c;新建终端 安装…
阅读更多...
C#学习笔记 面试提要

C#学习笔记 面试提要

冒泡 for (int m 0; m < arr.Length; m) { for (int n 0; n < arr.Length - 1 - m; n) { if (arr[n] > arr[n1]) { int temp arr[n]; arr[n] arr[n 1]; arr[n1] temp; } } } 选择 for (int m 0; m < arr.Length; m) { int index 0; for (int n 1; n < …
阅读更多...
HackTheBox-Mist

HackTheBox-Mist

整体思路 端口扫描->Pluck CMS组件文件读取漏洞->文件上传获取shell->创建指向exe的快捷方式来提权-> 信息收集&端口利用 namp -sSVC 10.10.11.17目标只开放了80端口&#xff0c;将mist.htb加入到hosts文件后&#xff0c;访问mist.htb Pluck CMS文件读取 在…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023