SpringBoot整合OSS文件上传

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

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

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

image

二、文件上传方式

1、服务器直传方式

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

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

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

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

Java连接实例:Java实践OSS
image

上传回调流程
image

  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

#操作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@Componentpublic 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 */@Servicepublic 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")@CrossOriginpublic 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

4、Vue文件上传测试代码

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

image

image

image

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

  • 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

  2. 启动前端项目
    image

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

项目地址

© 版权声明
THE END
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYTQ1Cbh' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

图形验证码
取消
昵称代码图片