谷粒商城微服务分布式基础篇八——对象存储OSS

商城品牌管理

新建品牌管理菜单

逆向生成的vue代码复制到vscode工作空间
brand.vue 页面代码
brand-add-or-update.vue 添加修改组件代码
启动项目：

对显示状态进行优化

使用Element-ui中tab表格自定义列模板
通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>

   
   

   
   
1
2
3
4

在brand.vue 中

  <!-- tab表格自定义模板template 通过slot-scope获取到数据  
  el-switch开关 active-value为1时打开，inactive-value为0时关闭 change当开关改变调用方法-->
      <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.showStatus"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"  
            :inactive-value="0"
            @change="updateBrandStatus(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

   
   

   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果

方法

//品牌状态修改
updateBrandStatus(data) {
  console.log("最新信息", data);
  let { brandId, showStatus } = data;
  //发送请求修改状态
  this.$http({
    url: this.$http.adornUrl("/product/brand/update/status"),
    method: "post",
    data: this.$http.adornData({ brandId, showStatus }, false)
  }).then(({ data }) => {
    this.$message({
      type: "success",
      message: "状态更新成功"
    });
  });
},

   
   

   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    /**
     * 修改状态
     */
    @RequestMapping("/update/status")
    public R updateStatus(@RequestBody BrandEntity brand){
		brandService.updateById(brand);
    <span class="token keyword">return</span> R<span class="token punctuation">.</span><span class="token function">ok</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

brand-add-or-update.vue中修改

      <el-form-item label="显示状态" prop="showStatus">
        <el-switch
          v-model="dataForm.showStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>

 
 

 
 
1
2
3
4
5
6
7
8
9

效果

阿里云对象存储OSS

什么是对象存储 OSS

阿里云对象存储服务（Object Storage Service，简称 OSS），是阿里云提供的海量、安全、低成本、高可靠的云存储服务。其数据设计持久性不低于 99.9999999999%（12 个 9），服务设计可用性（或业务连续性）不低于 99.995%。

OSS 具有与平台无关的 RESTful API 接口，您可以在任何应用、任何时间、任何地点存储和访问任意类型的数据。

您可以使用阿里云提供的 API、SDK 接口或者 OSS 迁移工具轻松地将海量数据移入或移出阿里云 OSS。数据存储到阿里云 OSS 以后，您可以选择标准存储（Standard）作为移动应用、大型网站、图片分享或热点音视频的主要存储方式，也可以选择成本更低、存储期限更长的低频访问存储（Infrequent Access）和归档存储（Archive）作为不经常访问数据的存储方式。

相关概念

存储类型（Storage Class）

OSS 提供标准、低频访问、归档三种存储类型，全面覆盖从热到冷的各种数据存储场景。其中标准存储类型提供高可靠、高可用、高性能的对象存储服务，能够支持频繁的数据访问；低频访问存储类型适合长期保存不经常访问的数据（平均每月访问频率 1 到 2 次），存储单价低于标准类型；归档存储类型适合需要长期保存（建议半年以上）的归档数据，在三种存储类型中单价最低。详情请参见存储类型介绍。

存储空间（Bucket）

存储空间是您用于存储对象（Object）的容器，所有的对象都必须隶属于某个存储空间。存储空间具有各种配置属性，包括地域、访问权限、存储类型等。您可以根据实际需求，创建不同类型的存储空间来存储不同的数据。创建存储空间请参见创建存储空间。

对象/文件（Object）

对象是 OSS 存储数据的基本单元，也被称为 OSS 的文件。对象由元信息（Object Meta）、用户数据（Data）和文件名（Key）组成。对象由存储空间内部唯一的 Key 来标识。对象元信息是一组键值对，表示了对象的一些属性，例如最后修改时间、大小等信息，同时您也可以在元信息中存储一些自定义的信息。

地域（Region）

地域表示 OSS 的数据中心所在物理位置。您可以根据费用、请求来源等选择合适的地域创建 Bucket。详情请参见 OSS 已开通的Region。

访问域名（Endpoint）

Endpoint 表示 OSS 对外服务的访问域名。OSS 以 HTTP RESTful API 的形式对外提供服务，当访问不同地域的时候，需要不同的域名。通过内网和外网访问同一个地域所需要的域名也是不同的。具体的内容请参见各个 Region 对应的 Endpoint。

访问密钥（AccessKey）

AccessKey（简称 AK）指的是访问身份验证中用到的 AccessKeyId 和 AccessKeySecret。OSS 通过使用 AccessKeyId 和 AccessKeySecret 对称加密的方法来验证某个请求的发送者身份。AccessKeyId 用于标识用户；AccessKeySecret 是用户用于加密签名字符串和 OSS 用来验证签名字符串的密钥，必须保密。获取 AccessKey 的方法请参见创建 AccessKey。
官方文档

OSS的优势

1、方便、快捷的使用方式
1）提供标准的RESTful API接口、丰富的SDK包、客户端工具、控制台。可以像使用文件一样方便地上传、下载、检索、管理用于Web网站或者移动应用的海量数据。不限文件数量和大小。可以根据所需存储量无限扩展存储空间，解决了传统硬件存储扩容问题。
2）支持流式写入和读出。特别适合视频等大文件的边写边读业务场景。
3）支持数据生命周期管理。可以自定义将到期数据批量删除或者转入到低成本的归档服务。
2、强大、灵活的安全机制
1）灵活的鉴权，授权机制。提供STS和URL鉴权和授权机制，以及白名单、防盗链、主子账号功能。
2）提供用户级别资源隔离机制和多集群同步机制（可选）。
3、丰富、强大的增值服务
1）图片处理：支持jpg、png、bmp、gif、webp、tiff等多种图片格式的转换，以及缩略图、剪裁、水印、缩放等多种操作。
2）音视频转码：提供高质量、高速并行的音视频转码能力，让音视频文件轻松应对各种终端设备。
3）内容加速分发：OSS作为源站，搭配CDN进行加速分发，具有稳定、无回源带宽限制、性价比高、一键配置的特点。

使用对象存储

开通对象存储

登录阿里云找到对象存储开通

创建Bucket

使用子用户

创建用户组

创建用户

在这勾选编程访问 记住相应 AccessKey ID ，AccessKey Secre

选择权限

这里不加权限上传图片时报错403:You have no right to access this object because of bucket acl

对象存储官方文档

Spring Cloud AliCloud OSS

OSS（Object Storage Service）是阿里云的一款对象存储服务产品， Spring Cloud AliCloud OSS 提供了Spring Cloud规范下商业版的对象存储服务，提供简单易用的API，并且支持与 Spring 框架中 Resource 的整合

引入 Spring Cloud AliCloud OSS

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

 
 

 
 
1
2
3
4

配置 OSS

使用 Spring Cloud AliCloud OSS 之前，需要在 application.properties 中加入以下配置。

spring.cloud.alicloud.access-key=你的阿里云AK
spring.cloud.alicloud.secret-key=你的阿里云SK
spring.cloud.alicloud.oss.endpoint=***.aliyuncs.com

 
 

 
 
1
2
3

OSS API

    @Autowired
    private OSS ossClient;
@Test
<span class="token keyword">void</span> <span class="token function">contextLoads</span><span class="token punctuation">(</span><span class="token punctuation">)</span> throws FileNotFoundException <span class="token punctuation">{</span>
    <span class="token comment">// 上传文件流。</span>
    InputStream inputStream <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileInputStream</span><span class="token punctuation">(</span><span class="token string">"文件路径"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    ossClient<span class="token punctuation">.</span><span class="token function">putObject</span><span class="token punctuation">(</span><span class="token string">"bucket名"</span><span class="token punctuation">,</span> <span class="token string">"上传到bucket的文件名"</span><span class="token punctuation">,</span> inputStream<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 关闭OSSClient。</span>
    ossClient<span class="token punctuation">.</span><span class="token function">shutdown</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   
<span class="token punctuation">}</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

测试结果

{
"msg": "success",
"code": 0,
"data": {
"accessid": "LTAI4GG4Pxxkhm7Egqd74GLL",
"policy": "eyJleHBpcmF0aW9uIjoiMjAyMC0wNC0yN1QxMzowOTowNy45NzZaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCIyMDIwLTA0LTI3LyJdXX0=",
"signature": "wJST7Y4lrjWETZ3Bvn7HgPRa5uA=",
"dir": "2020-04-27/",
"host": "https://daihao.oss-cn-shenzhen.aliyuncs.com",
"expire": "1587992947"
}
}

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12

Spring Cloud AliCloud OSS文档

商城项目使用

创建第三方服务项目，引入依赖，配置版本，nacos注册，nacos配置oss Nacos注册和配置

依赖

        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
        </dependency>
<span class="token operator">&lt;</span>dependencyManagement<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>dependencies<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>dependency<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>groupId<span class="token operator">&gt;</span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>cloud<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>artifactId<span class="token operator">&gt;</span>spring<span class="token operator">-</span>cloud<span class="token operator">-</span>dependencies<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>version<span class="token operator">&gt;</span>$<span class="token punctuation">{</span>spring<span class="token operator">-</span>cloud<span class="token punctuation">.</span>version<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>version<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>type<span class="token operator">&gt;</span>pom<span class="token operator">&lt;</span><span class="token operator">/</span>type<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>scope<span class="token operator">&gt;</span><span class="token keyword">import</span><span class="token operator">&lt;</span><span class="token operator">/</span>scope<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>dependency<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>groupId<span class="token operator">&gt;</span>com<span class="token punctuation">.</span>alibaba<span class="token punctuation">.</span>cloud<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>artifactId<span class="token operator">&gt;</span>spring<span class="token operator">-</span>cloud<span class="token operator">-</span>alibaba<span class="token operator">-</span>dependencies<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>version<span class="token operator">&gt;</span><span class="token number">2.1</span><span class="token number">.0</span><span class="token punctuation">.</span><span class="token constant">RELEASE</span><span class="token operator">&lt;</span><span class="token operator">/</span>version<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>type<span class="token operator">&gt;</span>pom<span class="token operator">&lt;</span><span class="token operator">/</span>type<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>scope<span class="token operator">&gt;</span><span class="token keyword">import</span><span class="token operator">&lt;</span><span class="token operator">/</span>scope<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependencies<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>dependencyManagement<span class="token operator">&gt;</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

application.yml

spring:
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
  application:
    name: mall-third-party

server:
port: 30000

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

bootstrap.properties

spring.application.name=mall-third-party
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
spring.cloud.nacos.config.namespace=b283b533-8478-4d97-a788-1815119a66e9

#读取nacos配置文件
spring.cloud.nacos.config.ext-config[0].data-id=oss.yml
spring.cloud.nacos.config.ext-config[0].group=DEFAULT_GROUP
spring.cloud.nacos.config.ext-config[0].refresh=true

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

oss.yml

Spring：
  cloud:
    alicloud:
      access-key:  开始的accesskey
      secret-key:  开始的secretkey
      oss:
        endponint: Bucket 域名

 
 

 
 
1
2
3
4
5
6
7

服务端签名后直传

我们采用JavaScript客户端直接签名时，AccessKeyID和AcessKeySecret会暴露在前端页面，因此存在严重的安全隐患。因此，OSS提供了服务端签名后直传的方案。

原理介绍

服务端签名后直传的原理如下：
用户发送上传Policy请求到应用服务器。
应用服务器返回上传Policy和签名给用户。
用户直接上传数据到OSS。

获取签名

@RestController
public class OssController {
@Autowired
<span class="token constant">OSS</span> ossClient<span class="token punctuation">;</span>

@<span class="token function">Value</span><span class="token punctuation">(</span><span class="token string">"${spring.cloud.alicloud.oss.endpoint}"</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> String endpoint<span class="token punctuation">;</span>
@<span class="token function">Value</span><span class="token punctuation">(</span><span class="token string">"${spring.cloud.alicloud.oss.bucket}"</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> String bucket<span class="token punctuation">;</span>

@<span class="token function">Value</span><span class="token punctuation">(</span><span class="token string">"${spring.cloud.alicloud.access-key}"</span><span class="token punctuation">)</span>
<span class="token keyword">private</span> String accessId<span class="token punctuation">;</span>


@<span class="token function">RequestMapping</span><span class="token punctuation">(</span><span class="token string">"/oss/policy"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> <span class="token constant">R</span> <span class="token function">policy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// host的格式为 bucketname.endpoint</span>
    String host <span class="token operator">=</span> <span class="token string">"https://"</span> <span class="token operator">+</span> bucket <span class="token operator">+</span> <span class="token string">"."</span> <span class="token operator">+</span> endpoint<span class="token punctuation">;</span>
    <span class="token comment">//callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。</span>
    <span class="token comment">//String callbackUrl = "http://88.88.88.88:8888";</span>
    String format <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SimpleDateFormat</span><span class="token punctuation">(</span><span class="token string">"yyyy-MM-dd"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 用户上传文件时指定的前缀</span>
    String dir <span class="token operator">=</span> format <span class="token operator">+</span> <span class="token string">"/"</span><span class="token punctuation">;</span>

    Map<span class="token operator">&lt;</span>String<span class="token punctuation">,</span> String<span class="token operator">&gt;</span> respMap <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        long expireTime <span class="token operator">=</span> <span class="token number">30</span><span class="token punctuation">;</span>
        long expireEndTime <span class="token operator">=</span> System<span class="token punctuation">.</span><span class="token function">currentTimeMillis</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> expireTime <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">;</span>
        Date expiration <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>expireEndTime<span class="token punctuation">)</span><span class="token punctuation">;</span>
        PolicyConditions policyConds <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">PolicyConditions</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        policyConds<span class="token punctuation">.</span><span class="token function">addConditionItem</span><span class="token punctuation">(</span>PolicyConditions<span class="token punctuation">.</span><span class="token constant">COND_CONTENT_LENGTH_RANGE</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1048576000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        policyConds<span class="token punctuation">.</span><span class="token function">addConditionItem</span><span class="token punctuation">(</span>MatchMode<span class="token punctuation">.</span>StartWith<span class="token punctuation">,</span> PolicyConditions<span class="token punctuation">.</span><span class="token constant">COND_KEY</span><span class="token punctuation">,</span> dir<span class="token punctuation">)</span><span class="token punctuation">;</span>

        String postPolicy <span class="token operator">=</span> ossClient<span class="token punctuation">.</span><span class="token function">generatePostPolicy</span><span class="token punctuation">(</span>expiration<span class="token punctuation">,</span> policyConds<span class="token punctuation">)</span><span class="token punctuation">;</span>
        byte<span class="token punctuation">[</span><span class="token punctuation">]</span> binaryData <span class="token operator">=</span> postPolicy<span class="token punctuation">.</span><span class="token function">getBytes</span><span class="token punctuation">(</span><span class="token string">"utf-8"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        String encodedPolicy <span class="token operator">=</span> BinaryUtil<span class="token punctuation">.</span><span class="token function">toBase64String</span><span class="token punctuation">(</span>binaryData<span class="token punctuation">)</span><span class="token punctuation">;</span>
        String postSignature <span class="token operator">=</span> ossClient<span class="token punctuation">.</span><span class="token function">calculatePostSignature</span><span class="token punctuation">(</span>postPolicy<span class="token punctuation">)</span><span class="token punctuation">;</span>

        respMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">LinkedHashMap</span><span class="token operator">&lt;</span>String<span class="token punctuation">,</span> String<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        respMap<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"accessid"</span><span class="token punctuation">,</span> accessId<span class="token punctuation">)</span><span class="token punctuation">;</span>
        respMap<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"policy"</span><span class="token punctuation">,</span> encodedPolicy<span class="token punctuation">)</span><span class="token punctuation">;</span>
        respMap<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"signature"</span><span class="token punctuation">,</span> postSignature<span class="token punctuation">)</span><span class="token punctuation">;</span>
        respMap<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"dir"</span><span class="token punctuation">,</span> dir<span class="token punctuation">)</span><span class="token punctuation">;</span>
        respMap<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"host"</span><span class="token punctuation">,</span> host<span class="token punctuation">)</span><span class="token punctuation">;</span>
        respMap<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"expire"</span><span class="token punctuation">,</span> String<span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span>expireEndTime <span class="token operator">/</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// respMap.put("expire", formatISO8601Date(expiration));</span>


    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">Exception</span> e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// Assert.fail(e.getMessage());</span>
        System<span class="token punctuation">.</span>out<span class="token punctuation">.</span><span class="token function">println</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span><span class="token function">getMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">return</span> <span class="token constant">R</span><span class="token punctuation">.</span><span class="token function">ok</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"data"</span><span class="token punctuation">,</span> respMap<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58

网关转发请求配置

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

 
 

 
 
1
2
3
4
5
6

单文件上传

前端组件 src\components\upload\singleUpload.vue 单文件上传，需要修改上传地址

<template> 
  <div>
    <el-upload
      action="http:// Bucket 域名"
      :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.KaTeX parse error: Expected 'EOF', got '}' at position 216: …n punctuation">}̲</span><span cl…{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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104

policy请求

src\components\upload\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);
        })
    });
}

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12

引入上传组件

src\views\modules\product\brand-add-or-update.vue 引入上传组件

      <el-form-item label="品牌logo地址" prop="logo">
        <!-- <el-input v-model="dataForm.logo" placeholder="品牌logo地址"></el-input> -->
        <single-upload v-model="dataForm.logo"></single-upload>
      </el-form-item>

<script>

import singleUpload from “@/components/upload/singleUpload.vue”;

export default {
components: {
singleUpload
},
……
};
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

修改CORS

测试报错，存在跨域请求。
客户端进行表单直传到OSS时，会从浏览器向OSS发送带有Origin的请求消息。OSS对带有Origin头的请求消息会进行跨域规则（CORS）的验证。因此需要为Bucket设置跨域规则以支持Post方法。

登录OSS管理控制台。单击设置。单击创建规则，配置如下图所示。

显示图片

      <el-table-column prop="logo" header-align="center" align="center" label="品牌logo地址">
        <template slot-scope="scope">
          <!-- <el-image
              style="width: 100px; height: 80px"
              :src="scope.row.logo"
          fit="fill"></el-image>-->
          <img :src="scope.row.logo" style="width: 100px; height: 80px" />
        </template>
      </el-table-column>

 
 

 
 
1
2
3
4
5
6
7
8
9

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                            </div>