SpringBoot整合OSS文件上传

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

1、登录阿里云账号



2、创建一个bucket



3、创建子用户



对自用户分配权限，打开操作OSS的全部权限（也可根据业务需求进行更改）



4、配置上传跨域规则

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

二、文件上传方式

1、服务器直传方式

每个OSS的用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器，应用服务器再把文件上传到OSS

和数据直传到OSS相比，以上方法有三个缺点：

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

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

Web前端服务端请求签名，然后前端(Vue)直接上传，不会对服务端产生压力，而且安全可靠。

相关资料：服务端签名直传并设置上传回调概述

Java连接实例：Java实践OSS

上传回调流程

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配置文件

#操作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文件上传时所需的对应参数

4、Vue文件上传测试代码

这里为了更加方便快捷的进行文件上传接口的测试，我选择使用Vue+Element-Ui来搭建一个简单的上传案例

1、创建Vue项目

在控制台中输入vue ui，启动vue项目图形管理界面



访问http://localhost:8000 ，进入如下图操作界面即代表启动成功



找到项目管理器，创建一个新Vue项目

这里选择Vue2版本



创建成功后添加本次案例所需要的依赖：

• 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. 启动后端服务
   
   

2. 启动前端项目
   
   

选择文件进行上传，如下图所示即表示上传成功



查看对应的OSSBucket，图片已成功存储至OSS服务中

项目地址