解决的问题：当前端并发上传大量文件至服务器时，服务器带宽存在瓶颈，会影响上传速度
解决方案：使用STS临时访问凭证访问OSS
流程：
p273744.jpg
获取RAM权限
根据不同项目使用情况，向公司OSS管理员（杨坤）提供bucket信息，申请权限。具体包含以下内容：
stsAccessKeyId
stsAccessKeySecret
stsRoleArn
stsRegionId
stsEndpoint
后端根据RAM权限，获取临时访问凭证
/**
* 获取SecurityToken
* @author yangkun
* @date 2022/4/25 11:57
* @return: com.aliyuncs.auth.sts.AssumeRoleResponse.Credentials
**/
public static AssumeRoleResponse.Credentials getSecurityToken(){
String roleSessionName = "SessionTest";
AssumeRoleResponse response = null;
try {
DefaultProfile.addEndpoint("",stsRegionId, "Sts", stsEndpoint);
// 构造default profile
IClientProfile profile = DefaultProfile.getProfile(stsRegionId, stsAccessKeyId, stsAccessKeySecret);
// 构造client
DefaultAcsClient client = new DefaultAcsClient(profile);
final AssumeRoleRequest request = new AssumeRoleRequest();
request.setMethod(MethodType.POST);
request.setRoleArn(stsRoleArn);
request.setRoleSessionName(roleSessionName);
request.setPolicy(null);
request.setDurationSeconds(3600L);
response = client.getAcsResponse(request);
} catch (Exception e) {
log.error("获取securityToken失败",e);
}
return response.getCredentials();
}</pre>
image-20220425172944683.png
前端根据临时访问凭证上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="upload">上传</button>
<input id="file" type="file" />
<!-- 导入SDK文件 -->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
region: 'oss-cn-hangzhou',
// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
accessKeyId: 'STS.NTRTwA1tqHpkxDyEquT8MeEka',
accessKeySecret: 'B2DZSSpyxehRyWbDxJx5zD2u3XdJxFD9G7YGXta65VGf',
// 从STS服务获取的安全令牌（SecurityToken）。
stsToken: 'CAIS9AF1q6Ft5B2yfSjIr5fnH8313KtQ/7KAemLIoXEgWLdhioDAgzz2IHhMeHhqCO8Xs/g1nWxS5/kSlqJIRoReREvCUcZr8symfp8/jtKT1fau5Jko1beHewHKeTOZsebWZ+LmNqC/Ht6md1HDkAJq3LL+bk/Mdle5MJqP+/UFB5ZtKWveVzddA8pMLQZPsdITMWCrVcygKRn3mGHdfiEK00he8Toluf/gk5HHskSC1wamkbMvyt6vcsT+Xa5FJ4xiVtq55utye5fa3TRYgxowr/8u0P0eqGiW443HWgULskrWKYjO+9hoNxRla7MmC1yvIiw+DjYSGoABCIsvRGR1ehV6vZ/Eb37eX0V0n/mob8yUuqm+t1juHyhl8Yo/YGvzeGkyX34RRMdXEQo5/YRpjzyHht660wAhAHWqtvgi2dCC8fI1leOfRuo8ajIqqF+U9E3stau8sCEvSB8+5GYSMjA6wB4034vqhIaON2CeKOceycHjV9W3/Rg=',
// 填写Bucket名称。
bucket: 'dev-dc'
});
const upload = document.getElementById("upload");
const headers = {
// 指定该Object被下载时网页的缓存行为。
// 'Cache-Control': 'no-cache',
// 指定该Object被下载时的名称。
// 'Content-Disposition': 'oss_download.txt',
// 指定该Object被下载时的内容编码格式。
// 'Content-Encoding': 'UTF-8',
// 指定过期时间。
// 'Expires': 'Wed, 08 Jul 2022 16:57:01 GMT',
// 指定Object的存储类型。
// 'x-oss-storage-class': 'Standard',
// 指定Object的访问权限。
// 'x-oss-object-acl': 'private',
// 设置Object的标签，可同时设置多个标签。
// 'x-oss-tagging': 'Tag1=1&Tag2=2',
// 指定CopyObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
// 'x-oss-forbid-overwrite': 'true',
};
async function putObject () {
try {
// 从输入框获取file对象，例如<input type="file" id="file" />。
const data = document.getElementById("file").files[0];
console.log(data)
// 创建并填写Blob数据。
//const data = new Blob(['Hello OSS']);
// 创建并填写OSS Buffer内容。
//const data = new OSS.Buffer(['Hello OSS']);
// 填写Object完整路径。Object完整路径中不能包含Bucket名称。
// 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
// data对象可以自定义为file对象、Blob数据或者OSS Buffer。
const result = await client.put(
"a/a.txt",
data
//{headers}
);
console.log(result);
} catch (e) {
console.log(e);
}
}
upload.addEventListener("click", () => {
putObject();
});
</script>
</body>
</html>
前端在发起文件上传请求前，判断是否接近过期时间或已超过过期时间，并及时刷新临时访问凭证。
