当前位置：首页 > news >正文

OSS（Object Storage Service）进行上传图片，下载图片（详细看文档可以完成操作）

news 2025/7/9 13:55:32

文章目录

- 1.单体前后端项目上传
- - 1.上传流程
  - 2. BuckName 和EndPoint
  - 3. AccessKey 和Access Secret(创建RAM（Resource Access Manage）的子账号，然后可以获得Accesskey和Acess Secret)
  - 3.根据创建的子账号分配OSS的所有权限(可以对文件进行上传，下载，删除的权限)
  - 4.采用上传的方式（服务器直传，服务器得签名后后端直传，前端直传）
  - 5. 出现跨域问题解决
  - 引入依赖
  - 6.前端实现code
  - 7.后端code实现
- 2.SpringCloud形式OSS上传
- - 1.引入依赖
  - 2.后端实现code
  - 3.前端实现code

1.单体前后端项目上传

1.上传流程

在这里插入图片描述
这样有利于保护自己的账号和密码不被泄露，通过账号密码生成的防伪笔名进行验证是否正确

2. BuckName 和EndPoint

在这里插入图片描述

3. AccessKey 和Access Secret(创建RAM（Resource Access Manage）的子账号，然后可以获得Accesskey和Acess Secret)

在这里插入图片描述

3.根据创建的子账号分配OSS的所有权限(可以对文件进行上传，下载，删除的权限)

在这里插入图片描述

4.采用上传的方式（服务器直传，服务器得签名后后端直传，前端直传）

前端直传：不好，用户可以直接f12找到我们的endpoint,bucketName,和重要的Acesskey,AccessSecret,不安全，导致我们的信息泄露。
服务器直传：会造成性能瓶颈，给服务器造成压力。
服务器得签名后后端直传：这种方法可以，可以加密我们的签名之后进行上传。如果想了解用户上传了什么东西可以设计上传回调
在这里插入图片描述

5. 出现跨域问题解决

在这里插入图片描述

引入依赖

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

6.前端实现code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>oss测试上传</title><script src="static/js/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script></head>
<body><div id="app"><!-- <form action="/upload/oss" method="post" enctype="multipart/form-data"><input type="file" name="file" value="选择文件上传"><input type="submit" name="提交"/></form> --><el-uploaddraggable="true"class="upload-demo":action="obj.host":before-upload="ossPolicy":on-success="onsuccess"//上传时绑定的数据:data="obj":limit="2":file-list="fileList"list-type="picture"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload></div><script src="static/js/axios.min.js"></script>  
<script type="text/javascript ">var vm=new Vue({el:"#app",data:{fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],obj:{OSSAccessKeyId:"",policy:"",signature:"",key:"",host:"",dir:"",}},methods: {ossPolicy(file){// 上传前，获取服务器给的签名axios({url:"http://localhost:8080/oss/policy",method:"get",}).then(res=>{console.log("come in ---------",res.data)this.obj.OSSAccessKeyId = res.data.accessId;this.obj.policy = res.data.policy;this.obj.dir = res.data.dir;this.obj.signature = res.data.signature; //传到oss的服务器地址this.obj.host = res.data.host;this.obj.key =res.data.dir + "${filename}";})},//文件上传成功时调用onsuccess(response, file, fileList){console.log("response",response)console.log(file)},}})
</script></body>
</html>

7.后端code实现

package com.qfedu.fmmall.controller;/****@author SmallMonkey*@Date 2023/2/10 13:07****/import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.UUID;@RestController
@CrossOrigin
@RequestMapping("/oss")
public class OssController {@RequestMapping("/policy")public Map<String,String> policy(){// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。String accessId = "LTAI5tRNby21a72dAhf4NbPa";String accessKey = "LTWOauYIuCkNF2O9zgU0Mm7HCuV5BE";// Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。String endpoint = "oss-cn-hangzhou.aliyuncs.com";// 填写Bucket名称，例如examplebucket。String bucket = "fmmallrebuild";// 填写Host地址，格式为https://bucketname.endpoint。String host = "https://" + bucket + "." + endpoint;// 设置上传回调URL，即回调服务器地址，用于处理应用服务器与OSS之间的通信。OSS会在文件上传完成后，把文件上传信息通过此回调URL发送给应用服务器。// String callbackUrl = "https://192.168.0.0:8888";// 设置上传到OSS文件的前缀，可置空此项。置空后，文件将上传至Bucket的根目录下。//可以加上当前的日期SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");String dir = simpleDateFormat.format(new Date()) + "/";//String objectName = dir + UUID.randomUUID().toString()+".png";// 创建ossClient实例。OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);try {long expireTime = 30;long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);PolicyConditions policyConds = new PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);byte[] binaryData = postPolicy.getBytes("utf-8");String encodedPolicy = BinaryUtil.toBase64String(binaryData);String postSignature = ossClient.calculatePostSignature(postPolicy);Map<String, String> respMap = new LinkedHashMap<String, String>();respMap.put("accessId", accessId);respMap.put("policy", encodedPolicy);respMap.put("signature", postSignature);respMap.put("dir", dir);respMap.put("host", host);respMap.put("expire", String.valueOf(expireEndTime / 1000));return respMap;
//服务进行上线之后，有一个外网可以访问的地址可以设置回调/*JSONObject jasonCallback = new JSONObject();jasonCallback.put("callbackUrl", callbackUrl);jasonCallback.put("callbackBody","filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");jasonCallback.put("callbackBodyType", "application/x-www-form-urlencoded");String base64CallbackBody = BinaryUtil.toBase64String(jasonCallback.toString().getBytes());respMap.put("callback", base64CallbackBody);JSONObject ja1 = JSONObject.fromObject(respMap);*/} catch (Exception e) {// Assert.fail(e.getMessage());System.out.println(e.getMessage());}return null;}}

2.SpringCloud形式OSS上传

1.引入依赖

    <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alicloud-oss</artifactId><version>2.2.0.RELEASE</version></dependency>

2.后端实现code

@RestController
public class OssController {@AutowiredOSS ossClient;@Value ("${spring.cloud.alicloud.oss.endpoint}")String endpoint ;@Value("${spring.cloud.alicloud.oss.bucket}")String bucket ;@Value("${spring.cloud.alicloud.access-key}")String accessId ;@Value("${spring.cloud.alicloud.secret-key}")String accessKey ;@RequestMapping("/oss/policy")public Map<String, String> policy(){String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpointString format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());String dir = format; // 用户上传文件时指定的前缀。Map<String, String> respMap=null;try {long expireTime = 30;long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);PolicyConditions policyConds = new PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);byte[] binaryData = postPolicy.getBytes("utf-8");String encodedPolicy = BinaryUtil.toBase64String(binaryData);String postSignature = ossClient.calculatePostSignature(postPolicy);respMap= new LinkedHashMap<String, String>();respMap.put("accessid", accessId);respMap.put("policy", encodedPolicy);respMap.put("signature", postSignature);respMap.put("dir", dir);respMap.put("host", host);respMap.put("expire", String.valueOf(expireEndTime / 1000));} catch (Exception e) {// Assert.fail(e.getMessage());System.out.println(e.getMessage());} finally {ossClient.shutdown();}return respMap;}
}

3.前端实现code

OSS（Object Storage Service）进行上传图片，下载图片（详细看文档可以完成操作）

文章目录1.单体前后端项目上传1.上传流程2. BuckName 和EndPoint3. AccessKey 和Access Secret(创建RAM（Resource Access Manage）的子账号，然后可以获得Accesskey和Acess Secret)3.根据创建的子账号分配OSS的所有权限(可以对文件进行上传&…...

编程日记 2023/2/10 21:03:33

4年功能测试经验，裸辞后找不到工作怎么办？

软件测试四年，主要是手动测试（部分自动化测试和性能测试，但是用的是公司内部自动化工具，而且我自动化方面是弱项。） 现在裸辞三个月了，面试机会少而且面试屡屡受挫。总结就是自动化，性能&#…...

编程日记 2023/2/10 21:02:26

类和对象（中）（二）

类和对象（中）（二）1.赋值运算符重载1.1运算符重载1.2赋值运算符重载1.3前置和后置重载2.const成员3.取地址及const取地址操作符重载🌟🌟hello，各位读者大大们你们好呀🌟🌟…...

编程日记 2023/2/10 21:01:21

Hadoop自动安装JDK

目录 1、使用xftp工具在opt目录下创建install和soft文件 2、使用xftp工具将压缩包上传到install文件 3、编写shell脚本 3.1、创建目录来放shell脚本 3.2、创建autoinsatll.sh文件并修改权限 3.3、编写autoinsatll.sh 文件 4、运行 5、测试 1、使用xftp工具在opt目…...

编程日记 2023/2/10 21:00:15

Springboot+Vue java毕业论文选题管理系统

在分析并得出使用者对程序的功能要求时，就可以进行程序设计了。如图展示的就是管理员功能结构图。系统实现前端技术：nodejsvueelementui 前端：HTML5,CSS3、JavaScript、VUE 系统分为不同的层次：视图层（vue页面&#…...

编程日记 2023/2/10 20:59:10

面向战场的cesium基础到进阶的案例展示(我相信VIP总是有原因的)

cesium 前置说明（友情提示，关注重点代码，其他影响复现的都可以删除或者替换数值解决）这里面用到了cesium的模型加载、图片加载、着色器、实时改变模型状态、模型删除等知识点，这需要你自己去观摩下述会包含所有相关代码，他们的联系其实在代码中能看到（比如飞机操作类会…...

编程日记 2023/2/10 20:58:02

XXL-JOB 分布式任务调度平台

目录一、简介 1.1 概述 1.2 社区交流 1.3 特性 1.4 架构设计 1.4.1 设计思想 1.4.2 系统组成 1.4.3 调度模块剖析 1） quartz的不足 1.5、同类型框架对比 1.6 下载 1.6.1 文档地址 1.7 环境二、XXL-JOB安装部署 2.1、配置部署“调度中心” 1&…...

编程日记 2023/2/10 20:56:56

通过指针引用多维数组详解

目录一：回顾多维数组地址知识二：二维数组的有关指针三：指向数组元素的指针变量四：用指向数组的指针作为函数参数首先简单来讲，指针变量可以指向一维数组中的元素，也可以指向多维数组中的元素。下面…...

编程日记 2023/2/10 20:55:49

【Linux】宝塔面板 SSL 证书安装部署

宝塔面板 SSL 证书安装部署前言证书下载宝塔配置SSL注意事项前言前期有讲过Tomcat和Nginx分别部署SSL证书，但也有好多小伙伴们私信我说，帮忙出一期宝塔面板部署SSL证书的教程，毕竟宝塔的用户体量也是蛮大的，于是宠粉的博主&…...

编程日记 2023/2/10 20:54:44

由 GPT 驱动的沙盒，尽情发挥想象力！ #NovelAI

一个由 GPT 驱动的沙盒，供用户尽情发挥想象力的空间，会获得怎样的体验？NovelAI NovelAI 是一项用于 AI 辅助创作、讲故事、虚拟陪伴的工具。NovelAI 的人工智能算法会根据用户的方式创建类似人类的写作，使任何人，无论能…...

编程日记 2023/2/10 20:53:38

ubuntu 服务器安装配置VNC访问

ubuntu 如果服务器没有桌面相关图形包，需手动安装下： sudo apt install ubuntu-desktop sudo apt install lightdm VNC安装： 1.安装在Ubuntu上安装x11vnc，如下： sudo apt-get install x11vnc 2.配置vnc密码 x1…...

编程日记 2023/2/10 20:52:28

【C→C++】打开C++世界的大门

文章目录前言什么是CC的发展史C的重要性1. 使用广泛度2. 工作领域的应用1. C关键字(C98)2. 命名空间2.1 命名空间的定义2.2 命名空间的使用2.3 std命名空间的使用惯例3. C输入&输出3.1 输入输出3.2 说明4. 缺省参数4.1 缺省参数概念4.2 缺省参数分类5. 函数重载5.1 函数重载…...

编程日记 2023/2/10 20:51:22

点云深度学习系列博客(四): 注意力机制原理概述

目录 1. 注意力机制由来 2. Nadaraya-Watson核回归 3. 多头注意力与自注意力 4. Transformer模型 Reference 随着Transformer模型在NLP，CV甚至CG领域的流行，注意力机制（Attention Mechanism）被越来越多的学者所注意，将…...

编程日记 2023/2/10 20:50:18

设置Visual Studio 2022背景图

前言编写代码时界面舒服，自己喜欢很重要。本篇文章将会介绍VS2022壁纸的一些设置，主题的更改以及如何设计界面。理想的界面应该是这样的接下来我们来一步步学习如何将界面设计成这样一、壁纸插件下载 1.拓展->点击拓展管理 2.右上角搜索backgro…...

编程日记 2023/2/10 20:49:12

1. 用Qt开发的十大理由

用Qt的十大理由原因最主要的是很多大公司都在用，有钱景。先来看看各大公司的评价： 奔驰：们用 Qt 开发了绝大部分的UI体验和软件，包括屏幕动画，屏幕间的过渡和小组件。 FORMLABS：凭借Qt的快速迭代&…...

编程日记 2023/2/10 20:48:06

俄罗斯方块游戏代码

♥️作者：小刘在C站 ♥️个人主页：小刘主页 ♥️每天分享云计算网络运维课堂笔记，努力不一定有收获，但一定会有收获加油！一起努力，共赴美好人生！ ♥️夕阳下，是最美的，绽…...

编程日记 2023/2/10 20:46:59

设计模式相关面试题

文章目录面向对象编程中，都有哪些设计原则？设计模式的分类 ？单例模式的特点是什么？单例模式有哪些实现？什么是简单⼯⼚模式什么是抽象⼯⼚模式？什么是⼯⼚⽅法模式？什么是代理模式？S…...

编程日记 2023/2/10 20:45:52

构建Jenkins 2.340持续集成环境

一、前言本文学习自：2022版Jenkins教程（从配置到实战) 如有不妥，欢迎指正二、构建资料已经包括了本文档使用的所有所需的安装包三、安装docker 1、解压docker docker-20.10.10.tgz2、复制文件 cp docker/* /usr/bin/3、编写启动文…...

编程日记 2023/2/10 20:44:46

Ubuntu/Centos下OpenJ9 POI输出Excel的Bug

项目更换 JDK为 OpenJ9 后, 使用 POI 导出 Excel 遇到的问题 OpenJ9 版本信息 /opt/jdk/jdk-11.0.178/bin/java -version openjdk version "11.0.17" 2022-10-18 IBM Semeru Runtime Open Edition 11.0.17.0 (build 11.0.178) Eclipse OpenJ9 VM 11.0.17.0 (build …...

编程日记 2023/2/10 20:43:40

链接脚本学习笔记

IAR 一般步骤链接器用于链接过程。它通常执行以下过程（请注意，某些步骤可以通过命令行选项或链接器配置文件中的指令关闭）： 1.确定应用程序中要包含哪些模块。始终包含对象文件中提供的模块。仅当库文件中的模块为从包含的模块…...

编程日记 2023/2/10 20:42:31

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现数据库设置 2个db_recovery参数创建guarantee闪回点，不需要开启数据库闪回。…...

编程新知 2025/6/17 3:47:36

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。核心特性与用法基本属性 v-model：绑定右侧列表的值&…...

编程新知 2025/7/8 14:04:20

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/7/5 11:46:14