【系统开发】尚硅谷 - 谷粒商城项目笔记（三）：OSS阿里云存储

news2024/10/7 20:36:49

文章目录

  • OSS阿里云存储
    • OSS基础配置
    • OSS跨域设置
    • 原生sdk方式上传
    • 阿里云sdk方式上传
    • 将oss配置加入nacos
    • 加入网关的路由分发
    • 和前端整合测试

OSS阿里云存储

OSS基础配置

img

image-20220126140938402

上传的账号信息存储在应用服务器

上传前先找应用服务器要一个policy上传策略，生成防伪签名

img

OSS跨域设置

image-20220126192924173

image-20220126192954332

image-20220126193032918

原生sdk方式上传

添加依赖包

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

测试

// Endpoint以广州为例，其它Region请按实际情况填写。
String endpoint = "http://oss-cn-guangzhou.aliyuncs.com";
// 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";

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

// 上传文件流。
InputStream inputStream = new FileInputStream("<yourlocalFile>");
ossClient.putObject("<yourBucketName>", "<yourObjectName>", inputStream);

// 关闭OSSClient。
ossClient.shutdown();

获取需要填写的密钥信息

image-20220126142202926

image-20220126142220058

image-20220126142247221

image-20220126142312723

image-20220126142400189

image-20220126143404808

image-20220126143435789

完整测试代码

@Test
    void testOss() throws FileNotFoundException {
        // Endpoint以广州为例，其它Region请按实际情况填写。
        String endpoint = "http://oss-cn-guangzhou.aliyuncs.com";
        // 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建。
        String accessKeyId = "LTAI5tNTYKY13HpzJMFDmA2q";
        String accessKeySecret = "ONbLcR0lw56HHKyZqkfIWeAiIM5VFO";

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

        // 上传文件流。
        InputStream inputStream = new FileInputStream("C:\\Users\\WSKH\\Desktop\\test.png");
        ossClient.putObject("gulimall-wskh", "原生sdk测试上传.png", inputStream);

        // 关闭OSSClient。
        ossClient.shutdown();

        System.out.println("上传成功");
    }

阿里云sdk方式上传

添加依赖

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

在配置文件中添加用户id和密钥信息

image-20220126144925083

最后在测试类中，自动注入OSS接口，直接使用即可

@SpringBootTest
class GulimallProductApplicationTests {

    @Autowired
    BrandService brandService;

    @Autowired
    OSS ossClient;

    @Test
    void testOss() throws FileNotFoundException {
        // 上传文件流。
        InputStream inputStream = new FileInputStream("C:\\Users\\WSKH\\Desktop\\test.png");
        ossClient.putObject("gulimall-wskh", "原生sdk测试上传2.png", inputStream);

        // 关闭OSSClient。
        ossClient.shutdown();

        System.out.println("上传成功");
    }

}

将oss配置加入nacos

在pulic命名空间下，创建gulimall-third-party.properties（名字可以自定义），之所以放在pulic下，而不是放在一个新建的命名空间下，是因为踩过坑，好像只有在pulic下才可以读取到（可能我没配置好环境）

image-20220126184238368

配置中内容如下，格式采用properties而不是yml，一开始我是用yml无法正常获取配置信息，后改为properties就可以了

# 广州的地址
spring.cloud.alicloud.oss.endpoint=oss-cn-guangzhou.aliyuncs.com
# 入口令牌
spring.cloud.alicloud.access-key=xxx
# 密码令牌
spring.cloud.alicloud.secret-key=xxx
# 上传文件后要存储在哪个bucket中
spring.cloud.alicloud.oss.bucket=gulimall-wskh

image-20220126184427059

然后是本地配置

# 服务名
spring.cloud.nacos.config.name=gulimall-third-party
# nacos地址
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
# 命名空间id 不写则默认使用pulic命名空间下的配置
#spring.cloud.nacos.config.namespace=47b926dd-dd1f-4552-b874-fd040045bb48
# 指明dataId
spring.cloud.nacos.config.extension-configs[0].data-id=gulimall-third-party.properties
# 分组设置，默认组即可
spring.cloud.nacos.config.extension-configs[0].group=DEFAULT_GROUP
# 是否自动刷新配置信息
spring.cloud.nacos.config.extension-configs[0].refresh=true

ok，一切准备就绪，让我们试一下

@RestController
public class OssController {

    @Autowired
    OSS 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.endpoint

        String 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;
    }
}

打开浏览器，输入http://localhost:7999/oss/policy，按回车，看到以下信息，说明配置成功啦

image-20220126185824690

加入网关的路由分发

在网关路由分发的配置中加入以下配置：

      - id: third_party_route
        uri: lb://gulimall-third-party
        predicates:
          - Path=/api/thirdparty/**
        filters:
          - RewritePath=/api/thirdparty/(?<segment>/?.*),/$\{segment}

和前端整合测试

在前端的组件文件夹下创建upload文件夹，里面有三个文件，内容如下：

image-20220127131506468

policy.js 上传函数封装

import http from '@/utils/httpRequest.js'
export function policy() {
   return  new Promise((resolve,reject)=>{
        http({
            url: http.adornUrl("/thirdparty/oss/policy"),
            method: "get",
            params: http.adornParams({})
        }).then(({ data }) => {
            resolve(data);
        })
    });
}

singleUpload.vue 单文件上传组件

<template>
  <div>
    <el-upload
      action="http://gulimall-wskh.oss-cn-guangzhou.aliyuncs.com"
      :data="dataObj"
      list-type="picture"
      :multiple="false"
      :show-file-list="showFileList"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过10MB
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { policy } from "./policy";
import { getUUID } from "@/utils";

export default {
  name: "singleUpload",
  props: {
    value: String
  },
  computed: {
    imageUrl() {
      return this.value;
    },
    imageName() {
      if (this.value != null && this.value !== "") {
        return this.value.substr(this.value.lastIndexOf("/") + 1);
      } else {
        return null;
      }
    },
    fileList() {
      return [
        {
          name: this.imageName,
          url: this.imageUrl
        }
      ];
    },
    showFileList: {
      get: function() {
        return (
          this.value !== null && this.value !== "" && this.value !== undefined
        );
      },
      set: function(newValue) {}
    }
  },
  data() {
    return {
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: ""
        // callback:'',
      },
      dialogVisible: false
    };
  },
  methods: {
    emitInput(val) {
      this.$emit("input", val);
    },
    handleRemove(file, fileList) {
      this.emitInput("");
    },
    handlePreview(file) {
      this.dialogVisible = true;
    },
    beforeUpload(file) {
      let _self = this;
      return new Promise((resolve, reject) => {
        policy()
          .then(response => {
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            _self.dataObj.key =
              response.data.dir + "/" + getUUID() + "_${filename}";
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            resolve(true);
          })
          .catch(err => {
            reject(false);
          });
      });
    },
    handleUploadSuccess(res, file) {
      console.log("上传成功...");
      this.showFileList = true;
      this.fileList.pop();
      this.fileList.push({
        name: file.name,
        url:
          this.dataObj.host +
          "/" +
          this.dataObj.key.replace("${filename}", file.name)
      });
      this.emitInput(this.fileList[0].url);
    }
  }
};
</script>
<style></style>

multiUpload.vue 多文件上传组件

<template>
  <div>
    <el-upload
      action="http://gulimall.oss-cn-shanghai.aliyuncs.com"
      :data="dataObj"
      list-type="picture-card"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
      :limit="maxCount"
      :on-exceed="handleExceed"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import { policy } from "./policy";
import { getUUID } from '@/utils'
export default {
  name: "multiUpload",
  props: {
    //图片属性数组
    value: Array,
    //最大上传图片数量
    maxCount: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
        uuid: ""
      },
      dialogVisible: false,
      dialogImageUrl: null
    };
  },
  computed: {
    fileList() {
      let fileList = [];
      for (let i = 0; i < this.value.length; i++) {
        fileList.push({ url: this.value[i] });
      }

      return fileList;
    }
  },
  mounted() {},
  methods: {
    emitInput(fileList) {
      let value = [];
      for (let i = 0; i < fileList.length; i++) {
        value.push(fileList[i].url);
      }
      this.$emit("input", value);
    },
    handleRemove(file, fileList) {
      this.emitInput(fileList);
    },
    handlePreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    beforeUpload(file) {
      let _self = this;
      return new Promise((resolve, reject) => {
        policy()
          .then(response => {
            console.log("这是什么${filename}");
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            _self.dataObj.key = response.data.dir + "/"+getUUID()+"_${filename}";
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            resolve(true);
          })
          .catch(err => {
            console.log("出错了...",err)
            reject(false);
          });
      });
    },
    handleUploadSuccess(res, file) {
      this.fileList.push({
        name: file.name,
        // url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名
        url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}",file.name)
      });
      this.emitInput(this.fileList);
    },
    handleExceed(files, fileList) {
      this.$message({
        message: "最多只能上传" + this.maxCount + "张图片",
        type: "warning",
        duration: 1000
      });
    }
  }
};
</script>
<style>
</style>

在需要的界面引入组件

image-20220127131709941

使用组件

image-20220127131724999

查看效果

image-20220127131748320

image-20220127131802097

如果报错503的话，可以在第三方服务模块中引入以下依赖：

        <!--    解决503问题    -->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-loadbalancer</artifactId>
            <version>2.2.1.RELEASE</version>
        </dependency>

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

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

相关文章

帮助中心的设计指南

帮助中心的设计指南

帮助中心是一个网站或应用程序的重要组成部分&#xff0c;因为它可以让用户轻松找到他们需要的信息。正确设计和实施一个高效的帮助中心可以确保用户满意度提高&#xff0c;并增加品牌忠诚度。本文将介绍如何设计一个优秀的帮助中心。 确定帮助中心的目标 在设计帮助中心之前&…
阅读更多...
风控安全产品系统设计的个人感悟

风控安全产品系统设计的个人感悟

背景 本篇文章会从系统架构设计的角度&#xff0c;分享在对业务安全风控相关基础安全产品进行系统设计时遇到的问题难点及其解决方案。 内容包括三部分&#xff1a;&#xff08;1&#xff09;风控业务架构&#xff1b;&#xff08;2&#xff09;基础安全产品的职责&#xff1…
阅读更多...
重新安装ROG Armoury Crate

重新安装ROG Armoury Crate

文章目录 使用官方卸载工具卸载奥创安装奥创 更新奥创之后 Aura Sync 坏了&#xff0c;无法调整灯光&#xff0c;打开 Aura Creator 提示服务运行异常&#xff1a; 在任务管理器中随便禁用了几个奥创、Asus的服务后&#xff0c;再次打开 Aura Creator&#xff0c;提示出了具…
阅读更多...
【码银送书第一期】通用人工智能：初心与未来

【码银送书第一期】通用人工智能：初心与未来

目录 前言 正文 内容简介 作者简介 译者简介 目录 前言 自20世纪50年代图灵在其划时代论文《计算机器与智能》中提出“图灵测试”以及之后的达特茅斯研讨会开始&#xff0c;用机器来模仿人类学习及其他方面的智能&#xff0c;即实现“人工智能”&#xff08;Artificial …
阅读更多...
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法

CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法

CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 水平居中效果图 水平居中 全局样式 .parent { color: #FFFFFF; height: 200px; width: 200px; margin: 0 auto; background-color: #000000;} .child { widt…
阅读更多...
No module named ‘torch_geometric‘解决办法

No module named ‘torch_geometric‘解决办法

参考链接&#xff1a; https://blog.csdn.net/weixin_47779152/article/details/120570367 https://data.pyg.org/whl/torch-1.12.0%2Bcu113.html https://blog.csdn.net/qq_44832009/article/details/129351554 https://blog.csdn.net/qq_43750528/article/details/130644899 …
阅读更多...
五、elasticsearch查询操作

五、elasticsearch查询操作

目录 数据准备 1、查询指定字段包含指定内容的文档 2、指定输出的文档字段查询&#xff08;“_source”&#xff09; 3、排序查询&#xff08;默认根据指定字段升序asc排序&#xff09;&#xff08;“sort”&#xff09; 4、分页查询 5、布尔查询&#xff08;多条件查询&…
阅读更多...
中国人民大学与加拿大女王大学金融硕士——在职读研撑起未来的帆

中国人民大学与加拿大女王大学金融硕士——在职读研撑起未来的帆

威廉姆曾说&#xff1a;“人生就是一次航行&#xff0c;航行中必然会遇到从各方面袭来的劲风。然而每一阵风都会加快你的航速&#xff0c;只要你稳住航舵&#xff0c;即使暴风雨也不会使你偏离航向”。在浩瀚的大海中&#xff0c;每个人都是一只独立的小船&#xff0c;掌舵的人…
阅读更多...
前四周我安卓的傻逼问题

前四周我安卓的傻逼问题

1&#xff09;这三个文档在在什么时候会使用到&#xff0c;以及主要是涉及到了哪一块的知识 2&#xff09;.ProjectConfig宏的配置 &#xff0c;这个在linux里面有什么用 3&#xff09;代码远程地址等等&#xff0c;这些是公司仓库&#xff0c;还是公共仓库&#xff0c;为啥有…
阅读更多...
品牌新闻稿怎么写得有高度和深度？纯干货

品牌新闻稿怎么写得有高度和深度？纯干货

品牌新闻稿是公司或品牌向公众发布的一种公关宣传工具&#xff0c;需要在选题、素材搜集整理、观点和见解、大纲搭建等方面做好准备&#xff0c;以写出高度和深度兼备的品牌新闻稿&#xff0c;接下来伯乐网络传媒就来给大家分享一下。 一、品牌新闻稿选题 品牌新闻稿的选题应该…
阅读更多...
vue-devtools浏览器调试工具离线安装教程

vue-devtools浏览器调试工具离线安装教程

vue-devtools浏览器调试工具离线安装教程 vue-devtools浏览器调试工具离线安装是下载源码&#xff0c;通过本地编译之后&#xff0c;在放到浏览器上 这里写目录标题 vue-devtools浏览器调试工具离线安装教程1.下载源码2.执行安装插件包命令3.安装插件 1.下载源码 [不推荐]在gi…
阅读更多...
SAP从入门到放弃之BOM配置-Part2

SAP从入门到放弃之BOM配置-Part2

感谢大佬的文章&#xff0c;最近在测试BOM行项目类别为R类别的功能&#xff0c;看到了这篇文章。最近忙只能机翻一下。建议大家点开原文地址看。 https://blogs.sap.com/2013/09/11/bom-configuration-bom-modification-parameters/ 介绍&#xff1a; 对于任何模块&#xff0…
阅读更多...
Doo Prime 德璞资本：你不能不知道的贵金属期货交易平台选取方法！

Doo Prime 德璞资本：你不能不知道的贵金属期货交易平台选取方法！

近些年来&#xff0c;在贵金属期货交易市场中&#xff0c;投资者越来越多。随着贵金属价格的波动&#xff0c;期货交易成为了一种非常有吸引力的投资方式。然而做期货交易&#xff0c;怎么选一家好的贵金属期货交易平台&#xff0c;成为了许多期货投资者非常关心的问题。 首先&…
阅读更多...
高压放大器在介电材料测试中的应用

高压放大器在介电材料测试中的应用

介电材料测试是一项重要的材料性能测试&#xff0c;它涉及到物理学、化学、材料科学等多个学科领域。高压放大器是介电材料测试中的一种重要设备&#xff0c;它可以放大微弱的电信号&#xff0c;提高测试的准确性和精度。下面将详细介绍高压放大器在介电材料测试中的应用。 图&…
阅读更多...
Axure教程—省市区三级联动（中继器）

Axure教程—省市区三级联动（中继器）

本文将教大家如何用AXURE中中继器制作省市区三级联动 一、效果 预览地址&#xff1a;https://t6gmmh.axshare.com 二、功能 选择省份、出现相应的市区&#xff0c;选择市区出现相应的区或县 省市区三级联动效果 三、制作 1、省 拖入一个矩形&#xff0c;命名为省&#xff0c…
阅读更多...
移动通信基站中光模块的应用解析

移动通信基站中光模块的应用解析

生活中你有看到光模块在工作吗&#xff1f;回答是肯定的。光模块的应用小到一个监控设备&#xff0c;大到数据中心、云计算、移动通信基站、超级计算机等领域&#xff0c;与我们的生活息息相关、密不可分。本期文章易天光通信&#xff08;ETU-LINK&#xff09;将带您来了解一下…
阅读更多...
带宽与吞吐量以及吞吐量对网络有什么影响

带宽与吞吐量以及吞吐量对网络有什么影响

什么是网络吞吐量 在优化和排除网络性能故障时&#xff0c;测量吞吐量是评估网络连接不良或滞后原因的主要方法之一。简单来说&#xff0c;吞吐量是指通过网络成功传输的数据量。它是在一段时间内从源到目标的数据传输速率。 当网络用户访问应用程序或共享文件时&#xff0c;…
阅读更多...
2023-06-19：讲一讲Redis分布式锁的实现？

2023-06-19：讲一讲Redis分布式锁的实现？

2023-06-19&#xff1a;讲一讲Redis分布式锁的实现&#xff1f; 答案2023-06-19&#xff1a; Redis分布式锁最简单的实现 要实现分布式锁&#xff0c;确实需要使用具备互斥性的Redis操作。其中一种常用的方式是使用SETNX命令&#xff0c;该命令表示"SET if Not Exists&…
阅读更多...
ChatGLM-6B 在 ModelWhale和本地 平台的部署与微调教程

ChatGLM-6B 在 ModelWhale和本地 平台的部署与微调教程

ChatGLM-6B 在 ModelWhale 平台的部署与微调教程 工作台 - Heywhale.com ChatGLM-6B 介绍 ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费…
阅读更多...
古希腊历史的五个阶段

古希腊历史的五个阶段

古希腊&#xff08;Greece&#xff09;&#xff0c;是西方文明的源头之一&#xff0c;是古代巴尔干半岛南部、爱琴海诸岛和小亚细亚沿岸的总称。古希腊是西方文明最重要和直接的渊源。 西方有记载的文学、科技、艺术都是从古代希腊开始的。古希腊不是一个国家的概念&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023