【学相伴】接入OSS后访问速度快了10倍

以你之姓@ 2021-09-25 11:04 302阅读 0赞

![null][]

## 问题场景 ##

一个`thymeleaf`项目，上传图片、视频是直接使用`Java`代码保存到服务器上

于是服务器压力激增，网页静态资源变得卡顿

**于是我们需要将图片、视频上传移植到阿里云OSS上**

> 阿里云对象存储OSS（Object Storage Service）是阿里云提供的海量、安全、低成本、高持久的云存储服务。

一句话描述：它是一个很棒的存取文件的在线服务器

我们可以使用它进行客户端上传，文件不通过服务端也可以上传，这样减轻了我们服务端压力

我们需要一系列配置才可以对接完成，查阅阿里云`OSS`官方文档发现：JavaScript客户端签名直传的方式最为简单，但这种方式是有弊端的，客户端通过`JavaScript`把存取文件的认证信息写在代码里面有泄露的风险

因此我们采用服务端签名后直传的方式进行上传文件，我们待会儿介绍~

## 准备工作 ##

> 登录阿里云官网

将鼠标移至产品，单击对象存储 OSS，打开 OSS 产品详情页面。

在 OSS 产品详情页，单击立即开通。

开通服务后，在 OSS 产品详情页单击管理控制台直接进入 OSS 管理控制台界面。

您也可以单击位于官网首页右上方菜单栏的控制台，进入阿里云管理控制台首页，然后单击左侧的对象存储 OSS 菜单进入 OSS 管理控制台界面。

根据官方文档提供步骤视频可以完成开通、创建`Bucket`、进行授权、配置跨域等 我们到阿里云`RAM`访问控制台来添加一个用户

![null][null 1] 添加用户

填入用户账号信息、勾选编程访问后点击确定

![null][null 2] 填入信息

然后我们点击复制，找个地方粘贴下来我们的`AccessKey ID`以及`AccessKey Secret`

![null][null 3] 复制密钥

然后我们点击添加权限为该用户授权

![null][null 4] 添加权限 ![null][null 5] 选择权限 ![null][null 6] 授权完成

## 开始对接 ##

> 官方文档流程图片： ![null][null 7] 图片介绍

这里可以这么理解：

假设小王接到老板的任务：将这堆货物放到仓库中去，但仓库大门的门禁需要门卡

所以上图中的类比

1：小王去保管室拿门卡

2：小王拿到门卡回来

3：小王搬运货物到仓库，存放货物

因此我们首先先做“保管室”的功能

## 后端代码实现 ##

这里就是用我们的`Java`代码在服务端实现：

引入`alicloud-oss`的依赖

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

`application.yml`，注意版本或者依赖不同，配置有可能改变，例如我最下面的`Demo`使用的`boot`的依赖(配置方式发生了变化，不过我们代码都还是一样的，只是注意@Value需要写对)

spring:
      cloud:
        alicloud:
          access-key: <你的AccessKey>
          secret-key: <你的SecretKey>
          oss:
            endpoint: <你的endpoint(可以在你的OSS控制台概览看到)>
            bucket: <你的bucket(可以在你的OSS控制台概览看到)>

`Controller`

package com.ruben.simpleoss.controller;
    import com.ruben.simpleoss.service.OssService;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    import javax.annotation.Resource;
    import java.util.Map;
    /**
     * 上传Controller
     *
     * @author <achao1441470436@gmail.com>
     * @since 2021/6/18 17:40
     */
    @RestController
    public class UploadController {
        @Resource
        private OssService ossService;
        /**
         * oss上传文件
         *
         * @author <achao1441470436@gmail.com>
         * @since 2021/6/17 10:07
         */
        @GetMapping("oss")
        public Map<String, Object> oss() {
            return ossService.getMark();
        }
    }

`Service`

package com.ruben.simpleoss.service;
    import java.util.Map;
    /**
     * Oss服务层
     *
     * @author <achao1441470436@gmail.com>
     * @since 2021/6/17 10:21
     */
    public interface OssService {
        Map<String, Object> getMark();
    }

`ServiceImpl`

package com.ruben.simpleoss.service.impl;
    import com.aliyun.oss.OSS;
    import com.aliyun.oss.common.utils.BinaryUtil;
    import com.aliyun.oss.model.MatchMode;
    import com.aliyun.oss.model.PolicyConditions;
    import com.ruben.simpleoss.service.OssService;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Service;
    import javax.annotation.Resource;
    import java.nio.charset.StandardCharsets;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.LinkedHashMap;
    import java.util.Map;
    /**
     * @ClassName: UploadServiceImpl
     * @Description: 获取OSS签证
     * @Date: 2020/6/3 21:55
     * *
     * @author: achao<achao1441470436 @ gmail.com>
     * @version: 1.0
     * @since: JDK 1.8
     */
    @Service
    public class OssServiceImpl implements OssService {
        @Resource
        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;
        /**
         * 获取临时签证
         *
         * @return
         */
        @Override
        public Map<String, Object> getMark() {
            String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
            // callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
    //        String callbackUrl = "http://88.88.88.88:8888";
            String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
            String dir = format + "/"; // 用户上传文件时指定的前缀。
            Map<String, String> respMap = null;
            try {
                long expireTime = 3000;
                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(StandardCharsets.UTF_8);
                String encodedPolicy = BinaryUtil.toBase64String(binaryData);
                String postSignature = ossClient.calculatePostSignature(postPolicy);
                respMap = new LinkedHashMap<String, String>(8);
                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();
            }
            Map<String, Object> result = new HashMap<>(4);
            result.put("data", respMap);
            result.put("code", 20000);
            return result;
        }
    }

然后我们运行访问一下，就像第一步小王去拿门卡了

可以看到拿到我们的临时凭证了，就像第二步小王拿着门卡回来了

![null][null 8] 访问接口

然后我们现在要拿着这些凭证去上传文件，就像第三步小王要去存货物

按照`PostObject`的文档测试一下

上传完成之后我们这里是没有回调的，因为我们这里没有配置`callback`，如有需要，可以查看`Callback`文档

![null][null 9] postman

上传完成之后我们可以在控制台看到我们上传的文件

![null][null 10] 上传完成看控制台

然后如果我们在代码里使用文件的`url`的话，就使用`host`\+`/`\+(`key`替换掉`${filename}`占位符为文件名)即可

例如我的`host`是`https://will-deprecated.oss-cn-chengdu.aliyuncs.com`

加上`/`再加上`key`为：`2021-06-18/17585793-95b9-4dbd-8dfc-2302d6afa5df_${filename}`替换掉文件名就是`2021-06-18/17585793-95b9-4dbd-8dfc-2302d6afa5df_partnerhead.jpg`(其实我测试过了，不用`${filename}`占位符，直接使用文件名也可以上传成功)

最终`https://will-deprecated.oss-cn-chengdu.aliyuncs.com/2021-06-18/17585793-95b9-4dbd-8dfc-2302d6afa5df_partnerhead.jpg`则是我们完整的文件路径

## 前端代码实现 ##

使用`html`\+`vue`

主页面，引用组件的地方

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>OSS上传Demo</title>
        <link href="/css/elementUI.css" rel="stylesheet">
        <script src="/js/jquery-3.5.1.min.js"></script>
        <script src="/js/vue.min.js"></script>
        <script src="/js/elementUI.js"></script>
        <script src="/js/singleUpload.js"></script>
    </head>
    <body>
    <div id="myapp">
        <single-upload ref="singleUpload" v-model="imageUrl"></single-upload>
        文件url：{ {imageUrl} }
    </div>
    <script>
        new Vue({
            el: '#myapp',
            data: {
                imageUrl: ''
            }
        })
    </script>
    </body>
    </html>

自己写的组件：

注意引入一些文件：

![null][null 11] 引入文件

## 最终效果： ##

![null][null 12] 演示效果1 ![null][null 13] 演示效果2 ![null][null 14] 演示效果3 ![null][null 15] 演示效果4 ![null][null 16] 演示效果5

## 项目源码 ##

本次案例完整项目代码：https://gitee.com/VampireAchao/simple-oss.git

这个项目基本能应对绝大部分场景，它那次请求签证接口是使用的`jQuery`的`ajax`

如果您是纯`vue`项目，可以看我以往这个项目https://gitee.com/VampireAchao/my-vue-app.git

## 小结 ##

通过对这次的`OSS`对接，复习了如何在`html`页面中引入`vue`、`elementUI`、引入`vue`自定义组件、进行第三方服务接入等...

大部分项目目前都接入了OSS，所以这是一个必须要掌握的技能！

文章编辑：学相伴阿超

KuangStudy首发：https://www.kuangstudy.com/bbs/1405846273780682753

--------------------

看完记得点个**赞**和**在看**吧，这对我们很重要哦~

![2c9f34855fa879b3994b3b0feb6b460b.png][]  
长按扫码关注平台最新动态

[null]: /images/20210923/8a2fc1d852ab459dbe3a852b8bb6cf05.png
[null 1]: /images/20210923/e8aa683d91334b22be26218773531159.png
[null 2]: /images/20210923/ec9f51a7a7a141b4ac70c402f9f8569d.png
[null 3]: /images/20210923/3f7b5f86ec3046928b99e3718a8ee18e.png
[null 4]: https://img-blog.csdnimg.cn/img_convert/624ae90f940307ef9ed4dd58e0cfea70.png
[null 5]: https://img-blog.csdnimg.cn/img_convert/83f3353bf8ab43b71c8847197820dbdd.png
[null 6]: /images/20210923/d22ef7cde6504a1aa2a8439f37f7c085.png
[null 7]: /images/20210923/c4bfd83228f949b3a9afd93442f82882.png
[null 8]: /images/20210923/2d80807853cd482abafeb736e05fb7c9.png
[null 9]: /images/20210923/3936d44c072b471ba316fdb494fcefa1.png
[null 10]: /images/20210923/2a6692af83cb4f549b36d21e11774519.png
[null 11]: /images/20210923/68465b261e6c48fc97ea924a27b9b36f.png
[null 12]: https://img-blog.csdnimg.cn/img_convert/bb113fbef3cc2b6275c860648e5b8df3.png
[null 13]: https://img-blog.csdnimg.cn/img_convert/67355f3a6890a0155e4ff5a18ec3f2fa.png
[null 14]: https://img-blog.csdnimg.cn/img_convert/865cff666fab0f3c6f240cebc5953f33.png
[null 15]: https://img-blog.csdnimg.cn/img_convert/ae6eb9b19faf4aaa679bb3e5c1e4fd8e.png
[null 16]: /images/20210923/06970e5c5c874648af1c54f76851d2f5.png
[2c9f34855fa879b3994b3b0feb6b460b.png]: /images/20210923/11b73efb1eb24e81888985f0bed90196.png