网站首页 编程教程 正文

SpringBoot整合OSS文件上传

2023-08-03

一、注册阿里云账号并开通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

上传回调流程

    Web前端请求应用服务器，获取上传所需参数（如OSS的accessKeyId、policy、callback等参数）
    应用服务器返回相关参数
    Web前端直接向OSS服务发起上传文件请求
    等上传完成后OSS服务会回调应用服务器的回调接口
    应用服务器返回响应给OSS服务
    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>

前后端联调

    启动后端服务

    启动前端项目

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

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

项目地址

SpringBoot整合OSS文件上传的相关教程结束。

友情链接：可视对讲 深圳网站建设 游戏攻略 秘密网 视野AI

2023. 北冥有鱼 自助网站建设 个人网站制作 编程教程大全

请使用1920*1080分辨率以上以及最新版的非IE浏览器浏览以获得最佳体验！

粤ICP备2020108910号  流量统计