前端教程:微服务结合阿里云OSS服务实现图片上传功能-WEB前端
开通OSS服务
进入阿里云官网,搜索【对象存储OSS】,根据页面提示完成开通即可。
使用OSS服务
① 创建子账户
右上角头像 - 进入AccessKey管理页面 - 点击使用子账号AccessKey。通过子账号专门用于图片的上传管理功能。
创建完成后,将来到子账户列表,在该页面可以看到所有的子账户信息,同时展示了刚创建好的账号的AccessKey ID(可理解为账号)和 AccessKey Secret(可理解为密码),请及时保存。
PS:若开通 Open API 调用访问,请及时保存 AccessKey 信息,页面关闭后将无法再次获取信息。
新创建好的账号是没有任何权限的,但是我们需要使用该子账户进行操作管理图片上传功能,所以需要给该子账户分配【管理对象存储服务(OSS)权限】权限。
② 配置OSS服务
链接: OSS新手入门指南官方视频.
进入 对象存储OSS控制台 - Bucket列表(左边导航栏) - 创建Bucket空间 - 根据网页提示填写相应信息并完成创建即可使用,以下仅供参考。
③ 代码实现
阿里云-OSS SDK文档
阿里云-aliyun-oss-spring-boot-sample示例代码文档
在要使用到oss服务的工程中引入相应依赖
<!--引入oss服务-->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>aliyun-oss-spring-boot-starter</artifactId>
</dependency>
若下载提示报错:cannot resolve com.alibaba.cloud:aliyun-oss-spring-boot-starter:unknown
请引入<dependencyManagement> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>aliyun-spring-boot-dependencies</artifactId> <version>1.0.0</version> <type>pom</type> <scope>import</scope> </dependency> </dependencyManagement>
在配置文件中配置
alibaba.cloud.access-key=your-ak
alibaba.cloud.secret-key=your-sk
alibaba.cloud.oss.endpoint=your-endpoint (如oss-cn-shenzhen.aliyuncs.com)
- access-key就是文章开头提示需要保存的AccessKey ID
- secret-key就是 AccessKey Secret
- oss.endpoint可以在oss管理控制台中 Bucket列表对应的Bucket详情中查询得到
文件上传OSS有两种方式:
①:用户在浏览器或App端上传文件到应用服务器,应用服务器再把文件上传到OSS。具体流程如下图所示。
以上方法存在以下缺点:
- 上传慢:用户数据需先上传到应用服务器,之后再上传到OSS,网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转,而是直传到OSS,速度将大大提升。而且OSS采用BGP带宽,能保证各地各运营商之间的传输速度。
- 扩展性差:如果后续用户数量逐渐增加,则应用服务器会成为瓶颈。
- 费用高:需要准备多台应用服务器。由于OSS上行流量是免费的,如果数据直传到OSS,将节省多台应用服务器的费用。
②:本文采用【服务端签名后直传】方式进行上传文件,具体流程如下图所示
链接:服务端签名后直传 介绍官方文档
服务端签名后直传是基于Post Policy的使用规则在服务端通过各种语言代码完成签名,然后通过表单直传数据到OSS。由于服务端签名直传无需将Accesskey暴露在前端页面,相比JavaScript客户端签名直传具有更高的安全性。
新建一个Controller返回服务端签名,具体代码如下:(可以不做改动)
/**
* 对象存储OSS controller类
*/
@RefreshScope //动态刷新配置文件
@RestController
@RequestMapping("/third/oss")
public class OssController {
//bucketName和endpoint已经在配置文件中配置过 可直接动态读取配置文件
@Value("${alibaba.cloud.oss.bucket}")
private String bucket; //该属性在配置文件中自定义即可
@Value("${alibaba.cloud.oss.endpoint}")
private String endpoint;
@Value("${alibaba.cloud.access-key}")
private String accessId;
//已经封装好的ossClient实例
@Autowired
private OSS ossClient;
@RequestMapping("policy")
public Map<String, String> policy(){
// String accessId = "<yourAccessKeyId>"; // 请填写您的AccessKeyId。
// String accessKey = "<yourAccessKeySecret>"; // 请填写您的AccessKeySecret。
// String endpoint = "oss-cn-hangzhou.aliyuncs.com"; // 请填写您的 endpoint。
// String bucket = "bucket-name"; // 请填写您的 bucketname 。
String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
// callbackUrl为上传回调服务器的URL,请将下面的IP和Port配置为您自己的真实信息。
// String callbackUrl = "http://88.88.88.88:8888";
//存储路径采用当天日期方式进行存储
String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
String dir = format+"/"; // 用户上传文件时指定的前缀。
Map<String, String> respMap = null;
try {
long expireTime = 30;
long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
Date expiration = new Date(expireEndTime);
// PostObject请求最大可支持的文件大小为5 GB,即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
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);
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));
// respMap.put("expire", formatISO8601Date(expiration));
} catch (Exception e) {
// Assert.fail(e.getMessage());
System.out.println(e.getMessage());
} finally {
ossClient.shutdown();
}
return respMap;
}
}
调用接口测试,得到以下结果,测试成功: