Spring Boot整合Minio后,前端的文件上传有两种方式:
1、文件上传到后端,由后端保存到Minio
这种方式好处是完全由后端集中管理,可以很好的做到、身份验证、权限控制、文件与处理等,并且可以做一些额外的业务逻辑,比如生成缩略图、提取元数据等。
缺点也很明显:
延迟时间高了,本来花费上传一次文件的时间,现在多了后端保存到Minio的时间
后端资源占用,后端本来可以只处理业务请求,现在还要负责文件流,增加了性能压力
单点故障,Minio即便做了集群,但是如果后端服务器故障,也会导致Minio不可用
所以,实际上我们不会把文件传到后端,而是直接传给Minio,其实这也符合OSS服务的使用方式。
2、文件向后端申请上传凭证,然后直接上传到Minio
为了避免Minio被攻击,我们需要结合后端,让后端生成并返回一个有时效的上传凭证,前端拿着这个凭证才能去上传,通过这种方式,我们可以做到一定程度的权限控制,本文要分享的就是这种方式。
部署好的Minio环境:http://mylocalhost:9001
简单过一下整合方式把。
io.minio
minio
7.1.0
# application.yml
minio:
endpoint: http://mylocalhost:9001
accessKey: minio
secretKey: minio123
bucket: demo
@Component
@ConfigurationProperties(prefix = "minio")
public class MinioProperties {
/**
* 对象存储服务的URL
*/
private String endpoint;
/**
* Access key就像用户ID,可以唯一标识你的账户
*/
private String accessKey;
/**
* Secret key是你账户的密码
*/
private String secretKey;
/**
* 默认文件桶
*/
private String bucket;
...
}
@Configuration
public class MinioConfig {
@Bean
public MinioClient minioClient(MinioProperties properties){
try {
MinioClient.Builder builder = MinioClient.builder();
builder.endpoint(properties.getEndpoint());
if (StringUtils.hasLength(properties.getAccessKey()) && StringUtils.hasLength(properties.getSecretKey())) {
builder.credentials(properties.getAccessKey(),properties.getSecretKey());
}
return builder.build();
} catch (Exception e) {
return null;
}
}
}
现在启动服务即可。
写一个接口,返回上传凭证:
@RequestMapping(value = "/presign", method = {RequestMethod.POST})
public Map presign(@RequestBody PresignParam presignParam) {
// 如果前端不指定桶,那么给一个默认的
if (StringUtils.isEmpty(presignParam.getBucket())) {
presignParam.setBucket("demo");
}
// 前端不指定文件名称,就给一个UUID
if (StringUtils.isEmpty(presignParam.getFilename())) {
presignParam.setFilename(UUID.randomUUID().toString());
}
// 如果想要以子目录的方式保存,就在前面加上斜杠来表示
// presignParam.setFilename("/2023/" + presignParam.getFilename());
// 设置凭证过期时间
ZonedDateTime expirationDate = ZonedDateTime.now().plusMinutes(10);
// 创建一个凭证
PostPolicy policy = new PostPolicy(presignParam.getBucket(), presignParam.getFilename(), expirationDate);
// 限制文件大小,单位是字节byte,也就是说可以设置如:只允许10M以内的文件上传
// policy.setContentRange(1, 10 * 1024);
// 限制上传文件请求的ContentType
// policy.setContentType("image/png");
try {
// 生成凭证并返回
final Map map = minioClient.presignedPostPolicy(policy);
for (Map.Entry entry : map.entrySet()) {
System.out.println(entry.getKey() + " = " + entry.getValue());
}
return map;
} catch (MinioException | InvalidKeyException | IOException | NoSuchAlgorithmException e) {
e.printStackTrace();
}
return null;
}
上面的示例代码可以知道,关注公众号:码猿技术专栏,回复关键词:1111 获取阿里内部Java性能调优手册的!我们还可以加一些权限认证,以判断用户是否有以下权限:
上传权限
可上传的文件大小
可上传的文件类型
请求参数类:
public class PresignParam {
// 桶名
private String bucket;
// 文件名
private String filename;
...
}
这个接口的返回结果是:
bucket: demo
x-amz-date: 20230831T042351Z
x-amz-signature: 79cc2ae0baee274d1d47cb29bdd5e99127059033503c2a02f904f0478a73ecac
key: 寂寞的季节.mp4
x-amz-algorithm: AWS4-HMAC-SHA256
x-amz-credential: minio/20230831/us-east-1/s3/aws4_request
policy: eyJleHBpcmF0aW9uIjoiMjAyMy0wOC0zMVQwNDozMzo1MS42MzZaIiwiY29uZGl0aW9ucyI6W1siZXEiLCIkYnVja2V0IiwiZGVtbyJdLFsiZXEiLCIka2V5Iiwi5a+C5a+e55qE5a2j6IqCLm1wNCJdLFsiZXEiLCIkeC1hbXotYWxnb3JpdGhtIiwiQVdTNC1ITUFDLVNIQTI1NiJdLFsiZXEiLCIkeC1hbXotY3JlZGVudGlhbCIsIm1pbmlvLzIwMjMwODMxL3VzLWVhc3QtMS9zMy9hd3M0X3JlcXVlc3QiXSxbImVxIiwiJHgtYW16LWRhdGUiLCIyMDIzMDgzMVQwNDIzNTFaIl1dfQ==
bucket
:表示目标桶
x-amz-date
:时间戳
x-amz-signature
:签名
key
:文件名
x-amz-algorithm
:签名算法
x-amz-credential
:认证授权
policy
:凭证token
前端收到后,将该凭证连同文件流一并上传到Minio服务器:
uploadFile(file, policy) {
console.log("准备上传文件:")
console.log("file:" + file)
console.log("policy:" + policy)
var formData = new FormData()
formData.append('file', file)
formData.append('key', policy['key'])
formData.append('x-amz-algorithm', policy['x-amz-algorithm'])
formData.append('x-amz-credential', policy['x-amz-credential'])
formData.append('x-amz-signature', policy['x-amz-signature'])
formData.append('x-amz-date', policy['x-amz-date'])
formData.append('policy', policy['policy'])
return new Promise(((resolve, reject) => {
$.ajax({
method: 'POST',
url: 'http://mylocalhost:9001/' + policy['bucket'],
data: formData,
dataType: 'json',
contentType: false, // 必须设置为 false,不设置 contentType,让浏览器自动设置
processData: false, // 必须设置为 false,不对 FormData 进行序列化处理
// async: false, // 设置同步,方便等下做分片上传
xhr: function xhr() {
//获取原生的xhr对象
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
//添加 progress 事件监听
xhr.upload.addEventListener('progress', function (e) {
//e.loaded 已上传文件字节数
//e.total 文件总字节数
var percentage = parseInt(e.loaded / e.total * 100)
vm.uploadResult = percentage + "%" + ":" + policy['key']
}, false);
}
return xhr;
},
success: function (result) {
vm.uploadResult = '文件上传成功:' + policy['key']
resolve(result)
},
error: function (e) {
reject()
}
})
}))
},
这样就完成了获取上传凭证并上传文件。
分片上传可以用在大文件上传上,一个100M的文件可以分成10份,每份10M,一共传输10次,这有以下好处:
Minio做了集群,用Nginx转发,那么分片上传可以降低单台Minio服务器的性能压力
多线程上传可以加快上传效率
现在说说秒传,我们上传一个文件之前,可以用工具生成MD5字符串,就好像这样:
3cc1f3c3c2d1a29ecf60ffad4de278c7
然后拼接上文件名:
3cc1f3c3c2d1a29ecf60ffad4de278c7_寂寞的季节.mp4
这时候去向后端申请上传凭证的时候,后端可以先去看看文件是否已存在,如果文件已存在,就不用生成凭证了,直接告诉前端该文件已经上传完毕,由此实现文件秒传。
这样的好处是:
降低Minio服务器压力
响应秒回,用户体验提高
结合分片上传和秒传的原理,我们可以来做到断点续传。
场景: 当我们要上传一个大文件的时候,进度到一半了,这时候网络掉线导致上传失败,网络恢复后又要重新上传,这就很崩溃。
处理方式: 大文件也可以分成一个个小文件来上传,这样即便上传到一半网络掉线,恢复上传的时候可以跳过前一半已上传的部分,接着上传后面一半。
当我们分片上传后,后端还需要提供接口,来将所有分片数据合并:
@GetMapping("/compose")
public void merge() {
List sources = new ArrayList<>();
// 分片数据放到另一个桶里面:slice
sources.add(ComposeSource.builder()
.bucket("slice")
.object("0寂寞的季节.mp4")
.build());
sources.add(ComposeSource.builder()
.bucket("slice")
.object("1寂寞的季节.mp4")
.build());
sources.add(ComposeSource.builder()
.bucket("slice")
.object("2寂寞的季节.mp4")
.build());
final ComposeObjectArgs args = ComposeObjectArgs.builder()
.bucket("demo")
.object("寂寞的季节.mp4")
.sources(sources)
.build();
try {
minioClient.composeObject(args);
} catch (MinioException | InvalidKeyException | IOException | NoSuchAlgorithmException e) {
e.printStackTrace();
}
}
上面的示例很简单,因为只做演示说明。
前端需要传的参数是:
分片桶:slice
分片数据数组:
0寂寞的季节.mp4
1寂寞的季节.mp4
2寂寞的季节.mp4
目标桶:demo
然后调用composeObject函数完成合并。
上面就是关于实战经验分享的全部了,因为需要前端配置来使用,所以这里给出我这篇文章的前端示例,很简单的单页面(技术栈就别吐槽了):
Title
{{title}}
---
|
{{uploadResult}}
- {{ item }}