【业务功能篇77】微服务-OSS对象存储-上传下载图片

news2024/12/28 20:38:02

3. 图片管理

文件存储的几种方式

单体架构可以直接把图片存储在服务器中

image.png

但是在分布式环境下面直接存储在WEB服务器中的方式就不可取了，这时我们需要搭建独立的文件存储服务器。

image.png

3.1 开通阿里云服务

针对本系统中的相关的文件，图片，文本等统一的交给云服务器管理。阿里云服务地址：https://www.aliyun.com/activity/daily/award?utm_content=se_1010784590

阿里云OSS简介

阿里云对象存储服务（Object Storage Service，简称OSS），是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。您可以通过本文档提供的简单的REST接口，在任何时间、任何地点、任何互联网设备上进行上传和下载数据。基于OSS，您可以搭建出各种多媒体分享网站、网盘、个人和企业数据备份等基于大规模数据的服务。

选择对象存储OSS

image.png

第一次打开没有开通，开通即可

image.png

image.png

然后进入了OOS对象存储的主页面

image.png

查看相关的文档：https://help.aliyun.com/document_detail/31947.html

相关术语介绍

image.png

创建Bucket

image.png

创建好的效果

image.png

在阿里云中直接操作文件上传

image.png

image.png

image.png

上传成功，我们拿到地址即可访问：

image.png

image.png

3.2 阿里云API使用

最终我们是需要通过服务代码将图片上传到阿里云OSS服务中，接下来看下代码API如何使用。Java操作的API文档地址：https://help.aliyun.com/document_detail/32008.html?spm=5176.208357.1107607.21.3476390f9Pqw6K

添加相关的依赖

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

image.png

image.png

创建子账户

image.png

设置对应的权限

image.png

通过官方的案例代码测试上传操作

    @Test
    public void testUploadFile() throws FileNotFoundException {
        // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
        String endpoint = "oss-cn-guangzhou.aliyuncs.com";
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = "LTAI5tBPqoroToQNyrHpYJLR";
        String accessKeySecret = "3GnWaRhcBW3gUDhNSVr23fSrM6A0Q4";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 填写本地文件的完整路径。如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        InputStream inputStream = new FileInputStream("C:\\Users\\dpb\\Downloads\\1111.jpg");
        // 依次填写Bucket名称（例如examplebucket）和Object完整路径（例如exampledir/exampleobject.txt）。Object完整路径中不能包含Bucket名称。
        ossClient.putObject("mashibing-mall", "1111.jpg", inputStream);

        // 关闭OSSClient。
        ossClient.shutdown();
        System.out.println("长传图片成功...");
    }

执行成功

image.png

3.3 AlibabaOSS服务

直接通过阿里云提供的API操作相对的复杂一些，这时我们可以通过SpringCloudAlibaba OSS服务来简化开发，添加对应的依赖

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

在属性文件中配置对应的AccessKey,SecurtKey和Endpoint

image.png

然后我们在业务代码中就可以直接从容器中获取OSSClient对象

image.png

image.png

3.4 图片上传的方式

第一种方式：表单提交同步将表单数据和图片都提交到后端服务器中，然后在后端服务器中将图片再上传到阿里云服务中。

image.png

但是这种方式的缺点是要做两次上传操作，还有就是将图片和正常的表单信息一起提交影响正常业务的效率。

第二种方式就是在客户端直接将图片上传到阿里云服务器中，返回访问的url地址，然后将url访问地址传递到后端服务进而保存在数据库中。

image.png

这种方式的缺点是在客户端需要获取AccessKey和SecuretKey，这样将相关的核心数据暴露在前端不安全。

第三种方式就是客户端向服务器获取阿里云的防伪签名，然后直接将图片通过防伪签名上传到阿里云服务器中。这样既提高了效率又保证了安全。

image.png

3.5 第三方公共服务

清楚了文件上传的方式后，客户端需要从服务器中获取服务防伪签名信息，同时我们后面还有很多其他的第三方服务，比如发送短信等，这时我们可以专门创建一个第三方的服务来处理这些请求。

image.png

修改pom文件中的SpringBoot的版本和SpringCloud的版本使其和其他模块的版本保持一致，然后同步注册中心和配置中心的操作。引入阿里云OSS服务的相关API，并测试即可

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.12</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.msb.mall</groupId>
    <artifactId>mall-third-party</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>mall-third-party</name>
    <description>第三方服务</description>
    <properties>
        <java.version>1.8</java.version>
        <spring-cloud.version>2020.0.1</spring-cloud.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>com.msb.mall</groupId>
            <artifactId>mall-commons</artifactId>
            <version>0.0.1-SNAPSHOT</version>
            <exclusions>
                <exclusion>
                    <groupId>com.baomidou</groupId>
                    <artifactId>mybatis-plus-boot-starter</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
            <version>2.1.0.RELEASE</version>
        </dependency>
    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${spring-cloud.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

属性文件：application.yml

# 数据库的连接新
spring:
  cloud:
    nacos:
      discovery:
        server-addr: 192.168.56.100:8848
    alicloud:
      access-key: LTAI5tBPqoroToQNyrHpYJLR
      secret-key: 3GnWaRhcBW3gUDhNSVr23fSrM6A0Q4
      oss:
        endpoint: oss-cn-guangzhou.aliyuncs.com
    application:
      name: mall-third
server:
  port: 8090

bootstrap.property

spring.application.name=mall-third
spring.cloud.nacos.config.server-addr=192.168.56.100:8848

注意在启动类中别忘了放开注册中心

image.png

测试图片上传的代码直接拷贝即可

image.png

image.png

3.6 服务端生成签名

生成签名地址：https://help.aliyun.com/document_detail/31926.htm?spm=a2c4g.11186623.0.0.2688566aJheBNk#concept-en4-sjy-5db

image.png

直接通过案例代码改造即可：https://help.aliyun.com/document_detail/91868.htm?spm=a2c4g.11186623.0.0.49c1344eaX3VCA#concept-ahk-rfz-2fb

@RestController
public class OSSController {

    @Autowired
    private OSS ossClient;

    @Value("${spring.cloud.alicloud.oss.endpoint}")
    private String endpoint;
    @Value("${spring.cloud.alicloud.oss.bucket}")
    private String bucket;
    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;

    @RequestMapping("/oss/policy")
    public Map<String, String> getOssPolicy(){

        String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
        // callbackUrl为上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format+"/"; // 用户上传文件时指定的前缀。

        // 创建OSSClient实例。
        //OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);
        Map<String, String> respMap = null;
        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            // PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
            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));
            // respMap.put("expire", formatISO8601Date(expiration));


        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }
        return respMap;
    }
}

相关的属性配置

# 数据库的连接新
spring:
  cloud:
    nacos:
      discovery:
        server-addr: 192.168.56.100:8848
    alicloud:
      access-key: LTAI5tBPqoroToQNyrHpYJLR
      secret-key: 3GnWaRhcBW3gUDhNSVr23fSrM6A0Q4
      oss:
        endpoint: oss-cn-guangzhou.aliyuncs.com
        bucket: mashibing-mall
    application:
      name: mall-third
server:
  port: 8090

访问即可：

image.png

客户端获取服务签名的时候肯定是走的网关路由，所以我们还需要在网关中添加Third服务的路由：

image.png

然后通过网关调用获取服务签名

image.png

3.7 品牌图片上传

第一个我们需要借助ElementUI中提供的el-upload组件来实现上传操作，我们预先准备了相关的上传代码

image.png

然后将这三个文件拷贝到项目目录中

image.png

然后在添加修改品牌的窗口中添加上传的组件

image.png

image.png

在操作中，我们发下获取的数据是从response.data中获取的，但是我们在服务端返回的是Map数据，没有data封装，这时我们需要调整后端Thrid服务接口的返回信息通过R对象来返回

image.png

最后OSS上传还会出现跨域问题，参考官方文档配置即可

image.png

出现跨域问题的解决方案

image.png

image.png

image.png

然后在OSS服务端也可以看到我们上传成功的文件

image.png

单独的文件上传我们就搞定了！

4. 添加品牌信息

图片上传处理完成后我们就可以实现品牌数据的添加和修改操作

image.png

提交后的数据在table中显示的是logo的图片地址，我们需要将其显示出来

image.png

image.png

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JavaSE 数组

JavaSE 数组

定义&#xff1a; int []arr; int arr[]; 初始化 // 完整格式 int arr[] new int[]{1, 2, 3}; // 简单格式 int arr[] {1, 2, 3}; 数组的元素访问、遍历 按照下标访问即可。数组的长度函数为 arr.length()。idea快速生成遍历的方法&#xff1a;数组名.fori 静态初始化 &a…
阅读更多...
9.Sentinel哨兵

9.Sentinel哨兵

1.Sentinel Sentinel&#xff08;哨兵&#xff09;是由阿里开源的一款流量控制和熔断降级框架&#xff0c;用于保护分布式系统中的应用免受流量涌入、超载和故障的影响。它可以作为微服务架构中的一部分&#xff0c;用于保护服务不被异常流量冲垮&#xff0c;从而提高系统的稳定…
阅读更多...
【神州数码】BGP路由器案例

【神州数码】BGP路由器案例

SwitchB、SwitchC和SwitchD位于AS200中&#xff0c;SwitchA位于AS100中。SwitchA和SwitchB共享一个相同的网络段11.0.0.0。而SwitchB和SwitchD彼此物理上不相邻。 则SwitchA的配置如下&#xff1a; SwitchA(config)#router bgp 100SwitchA(config-router-bgp)#neighbor 11.1.1…
阅读更多...
指针(初阶）

指针(初阶）

1. 指针是什么&#xff1f; 指针是什么&#xff1f; 指针理解的2个要点&#xff1a; 1. 指针是内存中一个最小单元的编号&#xff0c;也就是地址 2. 平时口语中说的指针&#xff0c;通常指的是指针变量&#xff0c;是用来存放内存地址的变量 总结&#xff1a;指针就是地址&…
阅读更多...
Wlan——锐捷零漫游网络解决方案以及相关配置

Wlan——锐捷零漫游网络解决方案以及相关配置

目录 零漫游介绍 一代零漫游 二代单频率零漫游 二代双频率零漫游 锐捷零漫游方案总结 锐捷零漫游方案的配置 配置无线信号的信道 开启关闭5G零漫游 查看配置 零漫游介绍 普通的漫游和零漫游的区别 普通漫游 漫游是由一个AP到另一个AP或者一个射频卡到另一个射频卡的漫…
阅读更多...
jquery实现单独使用laydate时间控件设置开始时间，结束时间最大最小值以及设置默认时分秒

jquery实现单独使用laydate时间控件设置开始时间，结束时间最大最小值以及设置默认时分秒

因项目内 会话时间所用框架为layui 里面的laydate时间控件 具体的设置文档里面都有些 我所用的这个不是日期时间范围 而是单独的日期时间的控件 意思就是两个是单独的 但是需要设置的是 开始最大 时间为结束时间的最小值 结束最小时间为开始结束的最大值 其余不能点击 当我选择…
阅读更多...
leetcode54. 螺旋矩阵(java)

leetcode54. 螺旋矩阵(java)

螺旋矩阵 题目描述解题 收缩法 上期经典算法 题目描述 难度 - 中等 原题链接 - leecode 54 螺旋矩阵 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7…
阅读更多...
潮湿对电子元器件有哪些影响？如何选择电子防潮柜？

潮湿对电子元器件有哪些影响？如何选择电子防潮柜？

随着科技的飞速发展&#xff0c;电子设备的应用越来越广泛&#xff0c;无论是生活、工业、农业领域随处可见各种各样的电子设备。电子设备在稳定的环境中是可以短时间存放的&#xff0c;但如果放置环境的湿度和温度发生较大改变&#xff0c;其性能会受到影响。电子设备受潮会有…
阅读更多...
开学后运营校园跑腿小程序行不行？

开学后运营校园跑腿小程序行不行？

校园跑腿小程序的运营是完全可行的&#xff0c;它为学生提供了便捷的校园代办服务。随着社会的发展和生活节奏的加快&#xff0c;越来越多的学生需要在学业之余处理个人事务&#xff0c;如购买日常用品、快递代取、打印复印文件等。传统的校园跑腿服务通常由个别学生或者组织提…
阅读更多...
LeetCode3.无重复字符的最长子串

LeetCode3.无重复字符的最长子串

虽然是一道中等题&#xff0c;但我5分钟就写完了&#xff0c;而且是看完题就知道怎么写&#xff0c;这一看就知道双指针&#xff0c;一个左一个右&#xff0c;右指针往后移如果没有重复的长度1&#xff1b;如果有重复的&#xff0c;左指针往右移&#xff0c;那如何判断重复呢&a…
阅读更多...
MyBatis相关知识

MyBatis相关知识

什么是MyBatis&#xff1f; MyBatis 是一个开源、轻量级的数据持久化框架&#xff0c;是 JDBC 和 Hibernate 的替代方案。MyBatis 内部封装了 JDBC&#xff0c;简化了加载驱动、创建连接、创建 statement 等繁杂的过程&#xff0c;开发者只需要关注 SQL 语句本身。 什么是持久…
阅读更多...
SpringBoot案例-修改员工-查询回显

SpringBoot案例-修改员工-查询回显

根据页面原型&#xff0c;明确需求 页面原型 需求 在员工信息栏的右侧存在一个编辑按钮&#xff0c;点击该按钮可以对员工信息进行修改&#xff0c;但是修改之前&#xff0c;会出现上述页面&#xff0c;将员工原有的信息进行展示回显。 阅读接口文档 接口文档的链接如下&am…
阅读更多...
API接口文档利器：Swagger 和 接口调试利器：Postman

API接口文档利器：Swagger 和 接口调试利器：Postman

2.接口相关工具 2.1API接口文档利器&#xff1a;Swagger 2.1.1Swagger介绍 Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务 (https://swagger.io/)。 它的主要作用是&#xff1a; 使得前后端分离开发更加方便&#xff0…
阅读更多...
把握医学营养趋势 健启星加速突围

把握医学营养趋势 健启星加速突围

随着“健康中国”战略的提出&#xff0c;大健康产业上升到国家战略高度&#xff0c;进入高速发展期。市场数据显示&#xff0c;医学营养市场发展势头迅猛&#xff0c;年平均增速超过30%&#xff0c;中国医学营养市场也迎来高速发展。但目前品牌处于高度分散的状态&#xff0c;市…
阅读更多...
【音视频】奇怪问题记录-执法仪引起的问题

【音视频】奇怪问题记录-执法仪引起的问题

现象 打开&#xff0c;关闭&#xff0c;再打开&#xff0c;反复这样操作&#xff0c;几次后&#xff0c;可能 出现&#xff08;1&#xff09;拉不出来&#xff08;2&#xff09;绿色的屏 &#xff08;3&#xff09;黑色的屏&#xff08;如上&#xff09;。 &#xff08;4&am…
阅读更多...
使用Token方式实现用户身份鉴权认证

使用Token方式实现用户身份鉴权认证

一、什么是Token&#xff1f; Token&#xff0c;也称为“令牌”&#xff0c;是服务端生成的一串字符串&#xff0c;以作客户端进行请求的一个令牌&#xff0c;当第一次登录后&#xff0c;服务器生成一个Token便将此Token返回给客户端&#xff0c;以后客户端只需带上这个Token前…
阅读更多...
基于风驱动算法优化的BP神经网络（预测应用） - 附代码

基于风驱动算法优化的BP神经网络（预测应用） - 附代码

基于风驱动算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于风驱动算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.风驱动优化BP神经网络2.1 BP神经网络参数设置2.2 风驱动算法应用 4.测试结果&#xff1a;5.Matlab代…
阅读更多...
关于BigDecimal你不知道的那些事儿

关于BigDecimal你不知道的那些事儿

&#x1f388;个人主页:&#x1f388; :✨✨✨ 阳光宅猿的博客站✨ &#x1f35f;&#xff08;正在建设当中&#xff0c;感兴趣的伙伴加v: sunsuncoder 一起交流&#xff09;&#x1f35f; &#x1f511;个人信条:&#x1f511; 大道至简 知行合一&#x1f335; &#x1f349;本…
阅读更多...
Four Operations

Four Operations

一、题目 Little Ruins is a studious boy, recently he learned the four operations! Now he want to use four operations to generate a number, he takes a string which only contains digits ‘1’ - ‘9’, and split it into 5 5 intervals and add the four operat…
阅读更多...
算法通关村十二关 | 字符串经典题目

算法通关村十二关 | 字符串经典题目

字符串问题&#xff0c;大家记得模板思路即可&#xff0c;一个类型的题目有很多种。 1. 字符串反转的问题 1.1 反转字符串 题目&#xff1a;LeetCode344: 思路 还是我们常见的双指针问题&#xff0c; left字符数组头部指针&#xff0c;right字符数组尾部指针。当left < r…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023