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