SpringBoot整合阿里云OSS上传图片

最新推荐文章于 2024-05-27 15:21:37 发布

Java&Mango

最新推荐文章于 2024-05-27 15:21:37 发布

阅读量686

点赞数 2

分类专栏：阿里云OSS 文章标签： spring boot 阿里云

本文链接：https://blog.csdn.net/mangomango123/article/details/113642104

版权

阿里云OSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

SpringBoot整合OSS上传图片

一、比较通过服务端上传图片到阿里云OSS 和服务端签名后直传方式（即通过前端上传图片）。

1、服务端上传图片到阿里云OSS，流程图如下：
在这里插入图片描述
2、服务端签名后直传方式（即通过前端上传图片），流程图如下：

总结：第一种方式和第二种方式相比，以上方法有三个缺点：

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

二、因此，我们选择第二种方式来上传图片到阿里云的OSS

首先要先配置阿里云的OSS（这里就不展示了）

1、pom.xml文件添加配置

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

2、application.yml 配置参数

server:
  port: 8888

oss:
  accessId: *********               #请填写您的AccessKeyId。
  accessKey: ********************   #请填写您的AccessKeySecret。
  endpoint: *********************   #请填写您的 endpoint。
  bucket: aliyunoss-test            #请填写您的 bucketname 。

3、服务端生成签名参数返回到前端

package com.mango.oss.aliyun_oss.controller;


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.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;
/**
 *上传图片
 * mango on 2020/11/24.
 */
@Controller
public class AliyunOssController {

    @Value("${oss.accessId}")
    private String accessId; // 请填写您的AccessKeyId。
    @Value("${oss.accessKey}")
    private String accessKey; // 请填写您的AccessKeySecret。
    @Value("${oss.endpoint}")
    private String endpoint; // 请填写您的 endpoint。
    @Value("${oss.bucket}")
    private String bucket; // 请填写您的 bucketname 。

    /**
     * 获取服务端签名参数
     * @return
     */
    @ResponseBody
    @GetMapping("/aliyun/oss/getpolicy")
    public Map<String, String> getPolicy(){
    
        String host = "http://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
        String dir = new SimpleDateFormat("yyyy-MM-dd").format(new Date()); // 图片上传后文件夹
        OSSClient client = new OSSClient(endpoint, accessId, accessKey);

        Map<String, String> respMap = null;
        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 = client.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = client.calculatePostSignature(postPolicy);

            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));
   
        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        }

        return respMap;
    }

    /**
     * 调用页面
     * @return
     */
    @GetMapping("/getindex")
    public String index(){
        return "index";
    }
}

4、前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>web直传oss</title>
		<style type="text/css">
			.file-box {
				position: relative;
				display: inline-block;
				width: 160px;
				height: 160px;
				background: url(img/aaa.png) no-repeat;
				background-size: cover;
				background-position: center;
			}

			#input_file {
				width: 100%;
				height: 100%;
				opacity: 0;
				filter: alpha(opacity=0);
			}
		</style>
	</head>

	<body>
		<p>oss web服务端签名后直传</p>
		<div class="file-box">
			<input type="file" value="" name="file" id="input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
			 onchange="imgPreview(this,0)">
		</div>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let uploadObj; // 上传凭证对象
			let verifyImg; //上传之后的图片oss地址
			function imgPreview(fileDom, i) {
				// 获取上传凭证
				$.ajax({
					url: '/aliyun/oss/getpolicy', // 这里是请求的后台通过oss上传凭证的接口
					/*data: JSON.stringify({
						data: ''
					}),*/
					dataType: 'json',
					type: 'get',
					headers: {
						'Content-Type': 'application/json',
					},
					success: function(response) {
						console.log(response)
						if (response != null) {
							uploadObj = response;
							// 获取到上传凭证成功之后 封装请求的数据
							let request = new FormData();
							request.append("OSSAccessKeyId", uploadObj.accessid); //Bucket 拥有者的Access Key Id。
							request.append("policy", uploadObj.policy); //policy规定了请求的表单域的合法性
							request.append("Signature", uploadObj.signature); //根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
							//---以上都是阿里的认证策略 							
							let file = document.getElementById("input_file").files[0];
							if (!file) {
								return;
							}
							request.append("key", `${uploadObj.dir}/${file.name}`); //文件名字，可设置路径
							request.append("success_action_status", '200'); // 让服务端返回200,不然，默认会返回204
							request.append('file', file); //需要上传的文件 file  
							$.ajax({
								url: uploadObj.host, //上传阿里地址
								data: request,
								processData: false, //默认true，设置为 false，不需要进行序列化处理
								cache: false, //设置为false将不会从浏览器缓存中加载请求信息
								async: false, //发送同步请求
								contentType: false, //避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
								dataType: 'json', //不涉及跨域  写json即可
								type: 'post',
							});
							// 上传成功提示
							alert('上传成功');
						} else {
							alert(`${response && response.header.msg[0]}`);
						}
					},
					error: function(error) {
						console.log(error);
					},
				});
				console.log(`上传的文件oss地址${verifyImg}`);
				//判断是否支持FileReader
				if (window.FileReader) {
					var reader = new FileReader();
				} else {
					alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
				}
				//获取文件
				var file = fileDom.files[0];
				if (!file) {
					return;
				}
				var imageType = /^image\//;
				//是否是图片
				if (!imageType.test(file.type)) {
					alert("请选择图片！");
					return;
				}
				//读取完成
				reader.onload = function(e) {
					//图片路径设置为读取的图片
					// img.src = e.target.result;
					document.getElementsByClassName('file-box')[i].style.background = "url(" + e.target.result + ")no-repeat"; //回显图片
					document.getElementsByClassName('file-box')[i].style.backgroundSize = '';
				};
				reader.readAsDataURL(file);
			}
		</script>
	</body>
</html>

5、演示，启动项目后，在浏览器输入：http://localhost:8888/getindex
在这里插入图片描述
6、图片上传成功

7、在阿里云官网查看图片，图片已上传。

github地址：https://github.com/526606178/aliyun_oss.git

Java&Mango

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot整合阿里云OSS上传图片

SpringBoot整合OSS上传图片一、比较通过服务端上传图片到阿里云OSS 和服务端签名后直传方式（即通过前端上传图片）。1、服务端上传图片到阿里云OSS，流程图如下：2、服务端签名后直传方式（即通过前端上传图片），流程图如下：总结：第一种方式和第二种方式相比，以上方法有三个缺点：**上传慢：**用户数据需先上传到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。而且OSS采用BGP带宽，能保证各地各运营
复制链接

扫一扫