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

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

news 2025/7/4 9:13:40

文章目录

    • 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&#xff08;Resource Access Manage&#xff09;的子账号&#xff0c;然后可以获得Accesskey和Acess Secret)3.根据创建的子账号分配OSS的所有权限(可以对文件进行上传&…...

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

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

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

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

类和对象（中）（二）

类和对象&#xff08;中&#xff09;&#xff08;二&#xff09;1.赋值运算符重载1.1运算符重载1.2赋值运算符重载1.3前置和后置重载2.const成员3.取地址及const取地址操作符重载&#x1f31f;&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f;&#x1f31f;…...

编程日记 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毕业论文选题管理系统

在分析并得出使用者对程序的功能要求时&#xff0c;就可以进行程序设计了。如图展示的就是管理员功能结构图。 系统实现前端技术&#xff1a;nodejsvueelementui 前端&#xff1a;HTML5,CSS3、JavaScript、VUE 系统分为不同的层次&#xff1a;视图层&#xff08;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&#xff09; quartz的不足 1.5、同类型框架对比 1.6 下载 1.6.1 文档地址 1.7 环境 二、XXL-JOB安装部署 2.1、配置部署“调度中心” 1&…...

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

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

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

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

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

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

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

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

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

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

ubuntu 服务器安装配置VNC访问

ubuntu 如果服务器没有桌面相关图形包&#xff0c;需手动安装下&#xff1a; sudo apt install ubuntu-desktop sudo apt install lightdm VNC安装&#xff1a; 1.安装 在Ubuntu上安装x11vnc&#xff0c;如下&#xff1a; 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&#xff0c;CV甚至CG领域的流行&#xff0c;注意力机制&#xff08;Attention Mechanism&#xff09;被越来越多的学者所注意&#xff0c;将…...

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

设置Visual Studio 2022背景图

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

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

1. 用Qt开发的十大理由

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

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

俄罗斯方块游戏代码

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

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

设计模式相关面试题

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

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

构建Jenkins 2.340持续集成环境

一、前言 本文学习自&#xff1a;2022版Jenkins教程&#xff08;从配置到实战) 如有不妥&#xff0c;欢迎指正 二、构建资料 已经包括了本文档使用的所有所需的安装包 三、安装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 一般步骤 链接器用于链接过程。它通常执行以下过程&#xff08;请注意&#xff0c;某些步骤可以通过命令行选项或链接器配置文件中的指令关闭&#xff09;&#xff1a; 1.确定应用程序中要包含哪些模块。始终包含对象文件中提供的模块。仅当库文件中的模块为从包含的模块…...

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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/6/21 16:43:12

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/6/28 14:46:06

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/7/3 5:29:36

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/4 7:21:24

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2025/6/20 1:39:48

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/7/3 1:25:47

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/6/26 1:25:59

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2025/6/26 4:10:04

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/6/21 21:14:00

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2025/7/3 12:51:47