web直传阿里OSS

推荐观看官方文档：

安装：https://help.aliyun.com/document_detail/64041.html

OSS鉴权详解:https://help.aliyun.com/document_detail/100624.htm?spm=a2c4g.11186623.0.0.3e141c58AiWb1H#concept-xzh-nzk-2gb

配置

不要弄错，不然就说你没有权限之类

添加用户：

记录 accessKeyId和 accessKeySecret 并设置AliyunSTSAssumeRoleAccess权限策略

添加自定义权限策略

“oss:PutObject” 是上传，也可以写别的，我直接写的*

{"Version": "1","Statement": [{"Effect": "Allow","Action": ["oss:PutObject"],"Resource": ["acs:oss:*:*:examplebucket/exampledir","acs:oss:*:*:examplebucket/exampledir/*"]}]
}

添加角色并添加刚刚的自定义权限策略

记录releArn

设置仓库的跨域访问

记录 endpoint 、regionID 、bucket

后端dome

地址：https://help.aliyun.com/document_detail/100624.htm?spm=a2c4g.11186623.0.0.3e141c58kwxJwC#concept-xzh-nzk-2gb

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.http.MethodType;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;
import com.aliyuncs.sts.model.v20150401.AssumeRoleRequest;
import com.aliyuncs.sts.model.v20150401.AssumeRoleResponse;
public class StsServiceSample {public static void main(String[] args) { // STS接入地址，例如sts.cn-hangzhou.aliyuncs.com。       String endpoint = "<sts-endpoint>";// 填写步骤1生成的访问密钥AccessKey ID和AccessKey Secret。String AccessKeyId = "<yourAccessKeyId>";String accessKeySecret = "<yourAccessKeySecret>";// 填写步骤3获取的角色ARN。String roleArn = "<yourRoleArn>";// 自定义角色会话名称，用来区分不同的令牌，例如可填写为SessionTest。        String roleSessionName = "<yourRoleSessionName>";// 以下Policy用于限制仅允许使用临时访问凭证向目标存储空间examplebucket上传文件。// 临时访问凭证最后获得的权限是步骤4设置的角色权限和该Policy设置权限的交集，即仅允许将文件上传至目标存储空间examplebucket下的exampledir目录。String policy = "{\n" +"    \"Version\": \"1\", \n" +"    \"Statement\": [\n" +"        {\n" +"            \"Action\": [\n" +"                \"oss:PutObject\"\n" +"            ], \n" +"            \"Resource\": [\n" +"                \"acs:oss:*:*:examplebucket/*\" \n" +"            ], \n" +"            \"Effect\": \"Allow\"\n" +"        }\n" +"    ]\n" +"}";try {// regionId表示RAM的地域ID。以华东1（杭州）地域为例，regionID填写为cn-hangzhou。也可以保留默认值，默认值为空字符串（""）。String regionId = "";// 添加endpoint。适用于Java SDK 3.12.0及以上版本。DefaultProfile.addEndpoint(regionId, "Sts", endpoint);// 添加endpoint。适用于Java SDK 3.12.0以下版本。// DefaultProfile.addEndpoint(endpointName, "", regionId, product: "Sts", endpoint);// 构造default profile。IClientProfile profile = DefaultProfile.getProfile(regionId, AccessKeyId, accessKeySecret);// 构造client。DefaultAcsClient client = new DefaultAcsClient(profile);final AssumeRoleRequest request = new AssumeRoleRequest();// 适用于Java SDK 3.12.0及以上版本。request.setSysMethod(MethodType.POST);// 适用于Java SDK 3.12.0以下版本。//request.setMethod(MethodType.POST);request.setRoleArn(roleArn);request.setRoleSessionName(roleSessionName);request.setPolicy(policy); // 如果policy为空，则用户将获得该角色下所有权限。request.setDurationSeconds(3600L); // 设置临时访问凭证的有效时间为3600秒。final AssumeRoleResponse response = client.getAcsResponse(request);System.out.println("Expiration: " + response.getCredentials().getExpiration());System.out.println("Access Key Id: " + response.getCredentials().getAccessKeyId());System.out.println("Access Key Secret: " + response.getCredentials().getAccessKeySecret());System.out.println("Security Token: " + response.getCredentials().getSecurityToken());System.out.println("RequestId: " + response.getRequestId());} catch (ClientException e) {System.out.println("Failed：");System.out.println("Error code: " + e.getErrCode());System.out.println("Error message: " + e.getErrMsg());System.out.println("RequestId: " + e.getRequestId());}}
}

前端dome

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title></head><body><button id="submit">上传</button><input id="file" type="file" /><!-- 导入SDK文件 --><scripttype="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: 'yourRegion',// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。accessKeyId: 'yourAccessKeyId',accessKeySecret: 'yourAccessKeySecret',// 从STS服务获取的安全令牌（SecurityToken）。stsToken: 'yourSecurityToken',// 填写Bucket名称。bucket: 'examplebucket'});// 从输入框获取file对象，例如<input type="file" id="file" />。const data = document.getElementById("file").files[0];// 创建并填写Blob数据。//const data = new Blob(['Hello OSS']);// 创建并填写OSS Buffer内容。//const data = new OSS.Buffer('Hello OSS']);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 {// 填写Object完整路径。Object完整路径中不能包含Bucket名称。// 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。// data对象可以自定义为file对象、Blob数据或者OSS Buffer。const result = await client.put("exampledir/exampleobject.txt",data//{headers});console.log(result);} catch (e) {console.log(e);}}upload.addEventListener("click", () => {putObject();});</script></body>
</html>

完整的dome

下载： http://lihong.zhengxinghua.top/ossdemo.zip

解压后修改成自己的配置，启动就好了

参考视频：https://www.bilibili.com/video/BV1kh411Q7Vs?from=search&seid=9310389602228937453&spm_id_from=333.337.0.0

结束

OSS玩了一个星期，基础功能终于弄明白了

坚持总会实现的，加油我们的青春~