SpringBoot整合OSS文件上传

浅浅的花香味﹌ 2024-03-16 11:39 105阅读 0赞

## 一、注册阿里云账号并开通OSS服务 ##

1、登录阿里云账号  
![image][]  
2、创建一个bucket  
![image][image 1]  
3、创建子用户  
![image][image 2]  
对自用户分配权限，打开操作OSS的全部权限（也可根据业务需求进行更改）  
![image][image 3]  
4、配置上传跨域规则

*  任何来源: \*
 *  允许方法: POST
 *  任何请求头Headers: \*

![image][image 4]

## 二、文件上传方式 ##

### 1、服务器直传方式 ###

每个OSS的用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器，应用服务器再把文件上传到OSS![image][image 5]  
和数据直传到OSS相比，以上方法有三个缺点：

*  上传慢：用户数据需先上传到到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用于数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。而且OSS采用BGP带宽，能保证各地各运营商之间的传输速度
 *  扩展性差：如果后续用户多了，应用服务器会成为瓶颈
 *  费用高：需要准备多台应用服务器。由于OSS上传流量是免费的，如果数据直传到OSS，不通过应用服务器，那么将能省下几台应用服务器

### 2、服务端签名后前端直传 ###

Web前端服务端请求签名，然后前端(Vue)直接上传，不会对服务端产生压力，而且安全可靠。  
相关资料：[服务端签名直传并设置上传回调概述][Link 1]

Java连接实例：[Java实践OSS][Java_OSS]  
![image][image 6]

上传回调流程  
![image][image 7]

1.  Web前端请求应用服务器，获取上传所需参数（如OSS的accessKeyId、policy、callback等参数）
2.  应用服务器返回相关参数
3.  Web前端直接向OSS服务发起上传文件请求
4.  等上传完成后OSS服务会回调应用服务器的回调接口
5.  应用服务器返回响应给OSS服务
6.  OSS服务将应用服务器回调接口的内容返回给Web前端

### 3、SpringBoot整合OSS实现文件上传 ###

1、在pom.xml中添加相关依赖

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

2、修改SpringBoot配置文件  
![image][image 8]

#操作oss需要的一些参数
    aliyun:
      oss:
        accessKeyId: xxx # 阿里云的accessKeyId
        accessKeySecret: xxx    # accessKey 密码
        endPoint:  xxx # Endpoint:在阿里云oss控制台查看自己使用的endpoint，eg: oss-cn-shanghai.aliyuncs.com 
        bucketName: xxx   # bucket 名称
        policy:
          expire: 300 # 签名有效期(S)
        maxSize: 10 # 上传文件大小(M)
        callback: http://localhost:8080/aliyun/oss/callback # 文件上传成功后的回调地址
        dir:
          prefix: xxx/images/ # 上传文件夹路径前缀

3、添加OSS的相关Java配置  
用于配置OSS的连接客户端的OSSClient

/**
     * TODO 用于配置OSS的连接客户端OSSClient
     *
     * @author ss_419
     * @version 1.0
     * @date 2023/5/28 19:04
     */
    @Configuration
    @Component
    public class OssConfig {
        
        @Value("${aliyun.oss.endpoint}")
        private String ALIYUN_OSS_ENDPOINT;
        @Value("${aliyun.oss.accessKeyId}")
        private String ALIYUN_OSS_ACCESSKEYID;
        @Value("${aliyun.oss.accessKeySecret}")
        private String ALIYUN_OSS_ACCESSKEYSECRET;
    
        @Bean
        public OSSClient ossClient() {
        
            return new OSSClient(ALIYUN_OSS_ENDPOINT, ALIYUN_OSS_ACCESSKEYID, ALIYUN_OSS_ACCESSKEYSECRET);
    
        }
    }

4、封装前端上传策略返回对象  
前端直传时所需要的参数

package org.pp.oss.model;
    
    /**
     * TODO 获取OSS上传文件授权返回结果
     *
     * @author ss_419
     * @version 1.0
     * @date 2023/5/28 19:07
     */
    public class OssPolicyResult {
        
        private String accessKeyId;
    //    @ApiModelProperty("用户表单上传的策略,经过base64编码过的字符串") 13
        private String policy;
    //    @ApiModelProperty("对policy签名后的字符串") 15
        private String signature;
    //    @ApiModelProperty("上传文件夹路径前缀") 17
        private String dir;
    //    @ApiModelProperty("oss对外服务的访问域名") 19
        private String host;
    //    @ApiModelProperty("上传成功后的回调设置")
        private String callback;
    // 忽略getter、setter方法
    }

5、封装上传成功回调参数对象  
当OSS上传成功后，会根据该配置参数来回调对应接口

package org.pp.oss.model;
    
    /**
     * TODO oss上传成功后的回调参数
     *
     * @author ss_419
     * @version 1.0
     * @date 2023/5/28 19:10
     */
    public class OssCallbackParam {
        
        //请求的回调地址
        private String callbackUrl;
        //回调是传入request中的参数
        private String callbackBody;
        //回调时传入参数的格式，比如表单提交形式
        private String callbackBodyType;
    
    
        public String getCallbackUrl() {
        
            return callbackUrl;
        }
    
        public void setCallbackUrl(String callbackUrl) {
        
            this.callbackUrl = callbackUrl;
        }
    
        public String getCallbackBody() {
        
            return callbackBody;
        }
    
        public void setCallbackBody(String callbackBody) {
        
            this.callbackBody = callbackBody;
        }
    
        public String getCallbackBodyType() {
        
            return callbackBodyType;
        }
    
        public void setCallbackBodyType(String callbackBodyType) {
        
            this.callbackBodyType = callbackBodyType;
        }
    }

6、封装上传成功后回调结果对象  
回调接口中返回的数据对象，封装了上传文件的信息

/**
     * TODO oss上传文件的回调结果
     *
     * @author ss_419
     * @version 1.0
     * @date 2023/5/28 19:14
     */
    public class OssCallbackResult {
        
        private String filename;// 文件名称
        private String size;// 文件大小
        private String mimeType;// 文件的mimeType
        private String width;// 图片文件的宽
        private String height;// 图片文件的高
    // 忽略getter、setter方法
    }

7、添加OSS业务接口OssService

/**
     * TODO  oss上传管理Service
     *
     * @author ss_419
     * @version 1.0
     * @date 2023/5/28 19:16
     */
    public interface OssService {
        
    
        /**
         * oss上传策略生成
         * @return
         */
        OssPolicyResult policy();
    
        /**
         * oss上传成功回调
         * @param request
         * @return
         */
        OssCallbackResult callback(HttpServletRequest request);
    }

8、OssService实现类

package org.pp.oss.service.impl;/*
    package org.pp.oss.service.impl;
    
    import org.pp.oss.model.OssCallbackResult;
    import org.pp.oss.model.OssPolicyResult;
    import org.pp.oss.service.OssService;
    
    import javax.servlet.http.HttpServletRequest;
    
    */
    
    import cn.hutool.json.JSONUtil;
    import com.aliyun.oss.OSSClient;
    import com.aliyun.oss.common.utils.BinaryUtil;
    import com.aliyun.oss.model.MatchMode;
    import com.aliyun.oss.model.PolicyConditions;
    import org.pp.oss.model.OssCallbackParam;
    import org.pp.oss.model.OssCallbackResult;
    import org.pp.oss.model.OssPolicyResult;
    import org.pp.oss.service.OssService;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Service;
    
    import javax.servlet.http.HttpServletRequest;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    
    /**
     * TODO
     *
     * @author ss_419
     * @version 1.0
     * @date 2023/5/28 19:17
     */
    @Service
    public class OssServiceImpl implements OssService {
        
        private static final Logger LOGGER = LoggerFactory.getLogger(OssServiceImpl.class);
        @Value("${aliyun.oss.policy.expire}")
        private int ALIYUN_OSS_EXPIRE;
        @Value("${aliyun.oss.maxSize}")
        private int ALIYUN_OSS_MAX_SIZE;
        @Value("${aliyun.oss.callback}")
        private String ALIYUN_OSS_CALLBACK;
        @Value("${aliyun.oss.bucketName}")
        private String ALIYUN_OSS_BUCKET_NAME;
        @Value("${aliyun.oss.endpoint}")
        private String ALIYUN_OSS_ENDPOINT;
        @Value("${aliyun.oss.dir.prefix}")
        private String ALIYUN_OSS_DIR_PREFIX;
    
        @Autowired
        private OSSClient ossClient;
    
        /**
         * 签名生成
         *
         * @return
         */
        @Override
        public OssPolicyResult policy() {
        
            OssPolicyResult result = new OssPolicyResult();
            // 存储目录
            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
            String baseDir = ALIYUN_OSS_DIR_PREFIX + sdf.format(new Date());
            // 签名有效期
            long expireEndTime = System.currentTimeMillis() + ALIYUN_OSS_EXPIRE * 1000;
            Date expiration = new Date(expireEndTime);
            // 文件大小
            long maxSize = ALIYUN_OSS_MAX_SIZE * 1024 *1024;
            // 回调地址
            OssCallbackParam callback = new OssCallbackParam();
            callback.setCallbackUrl(ALIYUN_OSS_CALLBACK);
            callback.setCallbackBody("filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
            callback.setCallbackBody("application/x-www-form-urlencoded");
            // 提交节点
            String action = "https://" + ALIYUN_OSS_BUCKET_NAME + "." + ALIYUN_OSS_ENDPOINT;
            try {
        
                PolicyConditions policyConds = new PolicyConditions();
                policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE,0,maxSize);
                policyConds.addConditionItem(MatchMode.StartWith,PolicyConditions.COND_KEY, baseDir);
                String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
                byte[] binaryData = postPolicy.getBytes("utf-8");
                String policy = BinaryUtil.toBase64String(binaryData);
                String signature = ossClient.calculatePostSignature(postPolicy);
                String callbackData = BinaryUtil.toBase64String(JSONUtil.parse(callback).toString().getBytes("UTF-8"));
                // 返回结果
                result.setAccessKeyId(ossClient.getCredentialsProvider().getCredentials().getAccessKeyId());
                result.setPolicy(policy);
                result.setSignature(signature);
                result.setDir(baseDir);
                result.setCallback(callbackData);
                result.setHost(action);
    
    
            } catch (Exception e) {
        
                LOGGER.error("签名生成失败{e}", e);
            }
    
            return result;
        }
    
        @Override
        public OssCallbackResult callback(HttpServletRequest request) {
        
            OssCallbackResult result = new OssCallbackResult();
            String filename = request.getParameter("filename");
            filename = "http://".concat(ALIYUN_OSS_BUCKET_NAME).concat(".").concat(ALIYUN_OSS_ENDPOINT).concat("/").concat(filename);
            result.setFilename(filename);
            result.setSize(request.getParameter("size"));
            result.setMimeType(request.getParameter("mimeType"));
            result.setHeight(request.getParameter("height"));
            result.setWidth(request.getParameter("width"));
    
            return result;
        }
    
    
    }

9、定义OssController接口

package org.pp.oss.controller;
    
    import cn.hutool.json.JSONObject;
    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.pp.oss.model.OssCallbackResult;
    import org.pp.oss.model.OssPolicyResult;
    import org.pp.oss.service.OssService;
    
    import org.springframework.beans.factory.annotation.Autowired;
    
    import org.springframework.web.bind.annotation.CrossOrigin;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.servlet.http.HttpServletRequest;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.LinkedHashMap;
    import java.util.Map;
    
    /**
     * TODO Oss相关操作接口
     *
     * @author ss_419
     * @version 1.0
     * @date 2023/5/28 20:43
     */
    @RestController
    @RequestMapping("/aliyun/oss")
    @CrossOrigin
    public class AliyunOssController {
        
    
        @Autowired
        private OssService ossService;
    
        @CrossOrigin
        @RequestMapping("/policys")
        public Map<String,String> policysMap(){
        
            // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
            String accessId = "xxx";
            String accessKey = "xxx";
            // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
            String endpoint = "oss-cn-shanghai.aliyuncs.com";
            // 填写Bucket名称，例如examplebucket。
            String bucket = "xxx";
            // 填写Host地址，格式为https://bucketname.endpoint。
            String host = "https://" + bucket + "."+ endpoint;
            // 设置上传回调URL，即回调服务器地址，用于处理应用服务器与OSS之间的通信。OSS会在文件上传完成后，把文件上传信息通过此回调URL发送给应用服务器。
            // String callbackUrl = "https://192.168.0.0:8888";
            // 设置上传到OSS文件的前缀，可置空此项。置空后，文件将上传至Bucket的根目录下。
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
            String formatData = dateFormat.format(new Date());
            String dir = "osstest/"+formatData+ "/";
    
            // 创建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;
                // respMap.put("expire", formatISO8601Date(expiration));
                // 回调数据
    //            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);
    //            // System.out.println(ja1.toString());
    //            response.setHeader("Access-Control-Allow-Origin", "*");
    //            response.setHeader("Access-Control-Allow-Methods", "GET, POST");
    //            response(request, response, ja1.toString());
    
            } catch (Exception e) {
        
                // Assert.fail(e.getMessage());
                System.out.println(e.getMessage());
            }
            return null;
        }
        /**
         * oss上传签名生成
         * @return
         */
        @CrossOrigin
        @RequestMapping("/policy")
        public OssPolicyResult policy(){
        
            OssPolicyResult result = ossService.policy();
            System.out.println("result = " + result);
            return result;
        }
    
        /**
         * oss上传成功回调
         * @return
         */
        @RequestMapping("/callback")
        public OssCallbackResult callback(HttpServletRequest request){
        
            OssCallbackResult callback = ossService.callback(request);
            System.out.println("callback = " + callback);
            return callback;
        }
    
    
    }

对接口进行测试，如下图所示，请求返回了oss文件上传时所需的对应参数  
![image][image 9]

### 4、Vue文件上传测试代码 ###

这里为了更加方便快捷的进行文件上传接口的测试，我选择使用Vue+Element-Ui来搭建一个简单的上传案例  
1、创建Vue项目  
在控制台中输入vue ui，启动vue项目图形管理界面  
![image][image 10]  
访问http://localhost:8000 ，进入如下图操作界面即代表启动成功  
![image][image 11]  
找到项目管理器，创建一个新Vue项目  
![image][image 12]

![image][image 13]

![image][image 14]

![image][image 15]

这里选择Vue2版本  
![image][image 16]  
创建成功后添加本次案例所需要的依赖：

*  axios：用于对后端服务发起Ajax请求
 *  element-ui：本案例使用到该ui组件库中的Upload，用于文件上传  
    在Vue项目中的main.js中启用对应依赖

import Vue from 'vue'
    import App from './App.vue'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import axios from "axios";
    import VueAxios from "vue-axios";
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    // Vue.use(axios)
    Vue.use(VueAxios,axios)
    Vue.use(ElementUI);
    new Vue({
        
      router,
      store,
      render: function (h) {
         return h(App) }
    }).$mount('#app')

创建OssUpload组件，该组件可以在项目中引用

<template>
        <el-upload
            class="upload-demo"
            :action="objData.host"
            :before-upload="ossPolicy"
            :data="objData"
            :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>
    </template>
    
    <script>
    export default {
        
        data() {
        
            return {
        
                fileList: [],
                objData: {
        
                    OSSAccessKeyId: '',
                    policy: '',
                    signature: '',
                    key: '',
                    host: '',
                    dir: ''
                }
    
            };
        },
        methods: {
        
            ossPolicy(file) {
        
                let _self = this;
                // 在上传前  进行服务器签名
                return new Promise((resolve, reject) => {
        
                        this.axios.get("http://localhost:8080/aliyun/oss/policy")
                            .then(response => {
        
                                console.log(response)
                                _self.objData.OSSAccessKeyId = response.data.accessKeyId
                                _self.objData.policy = response.data.policy
                                _self.objData.signature = response.data.signature
                                _self.objData.dir = response.data.dir
                                _self.objData.host = response.data.host+''
                                _self.objData.key = response.data.dir + "${filename}"
                                resolve(true) // 继续上传
                            })
                            .catch(error => {
        
                                console.log(error)
                                reject(false)
                            })
                    }
                )
    
            }
        }
    }
    </script>
    
    <style>
    
    </style>
    在HelloWorld.vue中引用文件上传组件
    ```js
    <template>
      <div class="hello">
        <h1>{
        {
         msg }}</h1>
        <OssUpload></OssUpload>
      </div>
    </template>
    
    <script>
    // 引用组件
    import OssUpload from "@/components/OssUpload.vue";
    export default {
        
    
        name: 'HelloWorld',
        components: {
        OssUpload},
      props: {
        
        msg: String
      }
    }
    </script>
    <style >
    
    </style>

前后端联调

1.  启动后端服务  
    ![image][image 17]
2.  启动前端项目  
    ![image][image 18]

选择文件进行上传，如下图所示即表示上传成功  
![image][image 19]  
查看对应的OSSBucket，图片已成功存储至OSS服务中  
![image][image 20]

[项目地址][Link 2]

[image]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/20d106c0ef9645639c6bd7c7d752faae.png
[image 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f6c8156a135846c598974f9448da9859.png
[image 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/df249dcb343c47c5b813245c5f6e7bdb.png
[image 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/4cf4a8681bbd404681dbaeede920ae02.png
[image 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/3b6b2f546cd04ebf8bbb274410621fdb.png
[image 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fc2c0d9e563e420dbb0f3c154f1c63b2.png
[Link 1]: https://www.alibabacloud.com/help/zh/object-storage-service/latest/add-signatures-on-the-server-configure-upload-callback-and-directly-transfer-data-overview#concept-qp2-g4y-5db
[Java_OSS]: https://www.alibabacloud.com/help/zh/object-storage-service/latest/add-signatures-on-the-server-configure-upload-callback-and-directly-transfer-data-java#concept-ahk-rfz-2fb
[image 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/99466b60b8c646f784cb31873f1ce05f.png
[image 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/448aece1f4f847009b04923dad5f3cea.png
[image 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d756416416c34e28be93e724fed25382.png
[image 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/91be82ba0efe4c0b8d46aab2f4f640e6.png
[image 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c43b6f7d401942babc61d6564b861f5a.png
[image 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ae2f3e7ebce44608a7bc4427408bcbb0.png
[image 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/04459728f8bf4d3a84d2a6f4a33ce52a.png
[image 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/33436295392a42e4ab82d00d14f8be85.png
[image 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b254b2466a7a4e7995105bbe46dbaa85.png
[image 15]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c3737b041c794f3891b45a972d43bf4a.png
[image 16]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d84bb65d118b484b870b3ad0ccd501d9.png
[image 17]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1428161c7ed245c882beeadf8ad086a5.png
[image 18]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b02cd0d444ad4209897200b899f7b064.png
[image 19]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/91b1da1248be4d6ba26f6345020577d4.png
[image 20]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/147cb406004e4f68b20f3b3c97509d96.png
[Link 2]: https://gitee.com/su-panpan0419/ossupload.git