概述
Spring Boot整合Minio后，前端的文件上傳有兩種方式：
-
文件上傳到后端，由后端保存到Minio
這種方式好處是完全由后端集中管理，可以很好的做到、身份驗(yàn)證、權(quán)限控制、文件與處理等，并且可以做一些額外的業(yè)務(wù)邏輯，比如生成縮略圖、提取元數(shù)據(jù)等。
缺點(diǎn)也很明顯：
-
延遲時(shí)間高了，本來(lái)花費(fèi)上傳一次文件的時(shí)間，現(xiàn)在多了后端保存到Minio的時(shí)間
-
后端資源占用，后端本來(lái)可以只處理業(yè)務(wù)請(qǐng)求，現(xiàn)在還要負(fù)責(zé)文件流，增加了性能壓力
-
單點(diǎn)故障，Minio即便做了集群，但是如果后端服務(wù)器故障，也會(huì)導(dǎo)致Minio不可用
所以，實(shí)際上我們不會(huì)把文件傳到后端，而是直接傳給Minio，其實(shí)這也符合OSS服務(wù)的使用方式。
-
-
文件向后端申請(qǐng)上傳憑證，然后直接上傳到Minio
為了避免Minio被攻擊，我們需要結(jié)合后端，讓后端生成并返回一個(gè)有時(shí)效的上傳憑證，前端拿著這個(gè)憑證才能去上傳，通過這種方式，我們可以做到一定程度的權(quán)限控制，本文要分享的就是這種方式。
環(huán)境準(zhǔn)備
-
部署好的Minio環(huán)境：http://mylocalhost:9001[1]
Spring Boot整合Minio
簡(jiǎn)單過一下整合方式把。
先引入Minio依賴
#?pom.xml
<dependency>
????<groupId>io.minio</groupId>
????<artifactId>minio</artifactId>
????<version>7.1.0</version>
</dependency>
然后定義配置信息
minio:
??endpoint:?http://mylocalhost:9001
??accessKey:?minio
??secretKey:?minio123
??bucket:?demo
定義一個(gè)屬性類
@Component
@ConfigurationProperties(prefix?=?"minio")
public?class?MinioProperties?{
????
?????*?對(duì)象存儲(chǔ)服務(wù)的URL
?????*/
????private?String?endpoint;
????
?????*?Access?key就像用戶ID，可以唯一標(biāo)識(shí)你的賬戶
?????*/
????private?String?accessKey;
????
?????*?Secret?key是你賬戶的密碼
?????*/
????private?String?secretKey;
????
?????*?默認(rèn)文件桶
?????*/
????private?String?bucket;
????
????...
}
定義Minio配置類
@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;
????????}
????}
}
現(xiàn)在啟動(dòng)服務(wù)即可。
上傳憑證
寫一個(gè)接口，返回上傳憑證：
@RequestMapping(value?=?"/presign",?method?=?{RequestMethod.POST})
public?Map<String,?String>?presign(@RequestBody?PresignParam?presignParam)?{
????
????if?(StringUtils.isEmpty(presignParam.getBucket()))?{
????????presignParam.setBucket("demo");
????}
????
????if?(StringUtils.isEmpty(presignParam.getFilename()))?{
????????presignParam.setFilename(UUID.randomUUID().toString());
????}
????
????
????
????ZonedDateTime?expirationDate?=?ZonedDateTime.now().plusMinutes(10);
????
????PostPolicy?policy?=?new?PostPolicy(presignParam.getBucket(),?presignParam.getFilename(),?expirationDate);
????
????
????
????
????try?{
????????
????????final?Map<String,?String>?map?=?minioClient.presignedPostPolicy(policy);
????????for?(Map.Entry<String,?String>?entry?:?map.entrySet())?{
????????????System.out.println(entry.getKey()?+?"?=?"?+?entry.getValue());
????????}
????????return?map;
????}?catch?(MinioException?|?InvalidKeyException?|?IOException?|?NoSuchAlgorithmException?e)?{
????????e.printStackTrace();
????}
????return?null;
}
上面的示例代碼可以知道，我們還可以加一些權(quán)限認(rèn)證，以判斷用戶是否有以下權(quán)限：
-
上傳權(quán)限
-
可上傳的文件大小
-
可上傳的文件類型
請(qǐng)求參數(shù)類：
public?class?PresignParam?{
????
????private?String?bucket;
????
????private?String?filename;
????
????...
}
這個(gè)接口的返回結(jié)果是：
bucket:?demo
x-amz-date:?20230831T042351Z
x-amz-signature:?79cc2ae0baee274d1d47cb29bdd5e99127059033503c2a02f904f0478a73ecac
key:?寂寞的季節(jié).mp4
x-amz-algorithm:?AWS4-HMAC-SHA256
x-amz-credential:?minio/20230831/us-east-1/s3/aws4_request
policy:?eyJleHBpcmF0aW9uIjoiMjAyMy0wOC0zMVQwNDozMzo1MS42MzZaIiwiY29uZGl0aW9ucyI6W1siZXEiLCIkYnVja2V0IiwiZGVtbyJdLFsiZXEiLCIka2V5Iiwi5a+C5a+e55qE5a2j6IqCLm1wNCJdLFsiZXEiLCIkeC1hbXotYWxnb3JpdGhtIiwiQVdTNC1ITUFDLVNIQTI1NiJdLFsiZXEiLCIkeC1hbXotY3JlZGVudGlhbCIsIm1pbmlvLzIwMjMwODMxL3VzLWVhc3QtMS9zMy9hd3M0X3JlcXVlc3QiXSxbImVxIiwiJHgtYW16LWRhdGUiLCIyMDIzMDgzMVQwNDIzNTFaIl1dfQ==
-
bucket：表示目標(biāo)桶
-
x-amz-date：時(shí)間戳
-
x-amz-signature：簽名
-
key：文件名
-
x-amz-algorithm：簽名算法
-
x-amz-credential：認(rèn)證授權(quán)
-
policy：憑證token
前端收到后，將該憑證連同文件流一并上傳到Minio服務(wù)器：
uploadFile(file,?policy)?{
????console.log("準(zhǔn)備上傳文件：")
????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,?
????????????processData:?false,?
????????????
????????????xhr:?function?xhr()?{
????????????????
????????????????var?xhr?=?$.ajaxSettings.xhr();
????????????????if?(xhr.upload)?{
????????????????????
????????????????????xhr.upload.addEventListener('progress',?function?(e)?{
????????????????????????
????????????????????????
????????????????????????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()
????????????}
????????})
????}))
},
這樣就完成了獲取上傳憑證并上傳文件。
分片上傳、秒傳、斷點(diǎn)續(xù)傳
分片上傳
分片上傳可以用在大文件上傳上，一個(gè)100M的文件可以分成10份，每份10M，一共傳輸10次，這有以下好處：
-
Minio做了集群，用Nginx轉(zhuǎn)發(fā)，那么分片上傳可以降低單臺(tái)Minio服務(wù)器的性能壓力
-
多線程上傳可以加快上傳效率
秒傳
現(xiàn)在說(shuō)說(shuō)秒傳，我們上傳一個(gè)文件之前，可以用工具生成MD5字符串，就好像這樣：
3cc1f3c3c2d1a29ecf60ffad4de278c7
然后拼接上文件名：
3cc1f3c3c2d1a29ecf60ffad4de278c7_寂寞的季節(jié).mp4
這時(shí)候去向后端申請(qǐng)上傳憑證的時(shí)候，后端可以先去看看文件是否已存在，如果文件已存在，就不用生成憑證了，直接告訴前端該文件已經(jīng)上傳完畢，由此實(shí)現(xiàn)文件秒傳。
這樣的好處是：
-
降低Minio服務(wù)器壓力
-
響應(yīng)秒回，用戶體驗(yàn)提高
斷點(diǎn)續(xù)傳
結(jié)合分片上傳和秒傳的原理，我們可以來(lái)做到斷點(diǎn)續(xù)傳。
場(chǎng)景：當(dāng)我們要上傳一個(gè)大文件的時(shí)候，進(jìn)度到一半了，這時(shí)候網(wǎng)絡(luò)掉線導(dǎo)致上傳失敗，網(wǎng)絡(luò)恢復(fù)后又要重新上傳，這就很崩潰。
處理方式：大文件也可以分成一個(gè)個(gè)小文件來(lái)上傳，這樣即便上傳到一半網(wǎng)絡(luò)掉線，恢復(fù)上傳的時(shí)候可以跳過前一半已上傳的部分，接著上傳后面一半。
文件合并
當(dāng)我們分片上傳后，后端還需要提供接口，來(lái)將所有分片數(shù)據(jù)合并：
@GetMapping("/compose")
public?void?merge()?{
????List<ComposeSource>?sources?=?new?ArrayList<>();
????
????sources.add(ComposeSource.builder()
????????????????.bucket("slice")
????????????????.object("0寂寞的季節(jié).mp4")
????????????????.build());
????sources.add(ComposeSource.builder()
????????????????.bucket("slice")
????????????????.object("1寂寞的季節(jié).mp4")
????????????????.build());
????sources.add(ComposeSource.builder()
????????????????.bucket("slice")
????????????????.object("2寂寞的季節(jié).mp4")
????????????????.build());
????final?ComposeObjectArgs?args?=?ComposeObjectArgs.builder()
????????.bucket("demo")
????????.object("寂寞的季節(jié).mp4")
????????.sources(sources)
????????.build();
????try?{
????????minioClient.composeObject(args);
????}?catch?(MinioException?|?InvalidKeyException?|?IOException?|?NoSuchAlgorithmException?e)?{
????????e.printStackTrace();
????}
}
上面的示例很簡(jiǎn)單，因?yàn)橹蛔鲅菔菊f(shuō)明。
前端需要傳的參數(shù)是：
-
分片桶：slice
- 分片數(shù)據(jù)數(shù)組：
-
0寂寞的季節(jié).mp4
-
1寂寞的季節(jié).mp4
-
2寂寞的季節(jié).mp4
-
-
目標(biāo)桶：demo
然后調(diào)用composeObject函數(shù)完成合并。
前端示例代碼分享
上面就是關(guān)于實(shí)戰(zhàn)經(jīng)驗(yàn)分享的全部了，因?yàn)樾枰岸伺渲脕?lái)使用，所以這里給出我這篇文章的前端示例，很簡(jiǎn)單的單頁(yè)面（技術(shù)棧就別吐槽了）：
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<script?src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
????<script?src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
????<script?src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
</head>
<body>
<div?id="app">
????<h1>{{title}}</h1>
????<br>
????<form?@submit.prevent="getPolicyForm">
????????<label>
????????????桶名
????????????<input?type="text"?v-model="policyParams.bucket">
????????</label>
????????<br>
????????<label>
????????????文件名
????????????<input?type="text"?v-model="policyParams.filename">
????????</label>
????????<br>
????????<button?type="submit">獲取上傳憑證</button>
????????<br>
????????<div?v-for="(val,?key)?in?policy"?:key="key">{{?key?}}:?<span>{{?val?}}</span></div>
????</form>
????<br>
????<form?@submit.prevent="uploadFileForm"?v-show="policy?!=?null">
????????<label>
????????????文件
????????????<input?type="file"?@change="fileChange">
????????</label>
????????<br>
????????<br>
????????<button?type="submit"?v-show="file?!=?null">上傳文件</button>
????</form>
????---
????<br>
????<div?v-show="file?!=?null">
????????<button?@click="sliceEvent">測(cè)試文件分片上傳</button>
????????|
????????<button?@click="sliceComposeEvent">分片文件合并</button>
????</div>
????<br>
????<br>
????<br>
????<p>{{uploadResult}}</p>
????<ul>
????????
????????<li?v-for="(item,?index)?in?sliceUploadResult"?:key="index">{{?item?}}</li>
????</ul>
????<br>
</div>
<script>
????var?vm?=?new?Vue({
????????el:?"#app",
????????data()?{
????????????return?{
????????????????title:?"Minio測(cè)試"
????????????????
????????????????,?policyParams:?{
????????????????????bucket:?null
????????????????????,?filename:?null
????????????????}
????????????????
????????????????,?policy:?null
????????????????
????????????????,?file:?null
????????????????
????????????????,?uploadParams:?{
????????????????????file:?null
????????????????}
????????????????
????????????????,?sliceParams:?{
????????????????????bucket:?""
????????????????????,?filename:?""
????????????????????,?file:?null
????????????????}
????????????????,?slicePolicys:?[]
????????????????,?sliceCount:?0
????????????????
????????????????,?uploadResult:?null
????????????????
????????????????,?sliceUploadResult:?null
????????????};
????????},
????????methods:?{
????????????getPolicyForm()?{
????????????????this.policyParams.bucket?=?"demo"
????????????????this.policyParams.filename?=?"寂寞的季節(jié).mp4"
????????????????this.requestPolicy(this.policyParams)
????????????},
????????????requestPolicy(params)?{
????????????????return?new?Promise(((resolve,?reject)?=>?{
????????????????????$.ajax({
????????????????????????type:?"POST",
????????????????????????url:?"http://localhost:8888/presign",
????????????????????????contentType:?"application/json",
????????????????????????data:?JSON.stringify(params),
????????????????????????
????????????????????????success:?function?(result)?{
????????????????????????????console.log(result)
????????????????????????????vm.policy?=?result;
????????????????????????????resolve(result)
????????????????????????},
????????????????????????error:?function?(e)?{
????????????????????????????reject()
????????????????????????}
????????????????????});
????????????????}))
????????????},
????????????fileChange(event)?{
????????????????const?file?=?event.target.files[0]
????????????????this.file?=?file
????????????},
????????????uploadFileForm()?{
????????????????this.uploadFile(this.file,?this.policy)
????????????},
????????????uploadFile(file,?policy)?{
????????????????console.log("準(zhǔn)備上傳文件：")
????????????????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,?
????????????????????????processData:?false,?
????????????????????????
????????????????????????xhr:?function?xhr()?{
????????????????????????????
????????????????????????????var?xhr?=?$.ajaxSettings.xhr();
????????????????????????????if?(xhr.upload)?{
????????????????????????????????
????????????????????????????????xhr.upload.addEventListener('progress',?function?(e)?{
????????????????????????????????????
????????????????????????????????????
????????????????????????????????????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()
????????????????????????}
????????????????????})
????????????????}))
????????????},
????????????sliceEvent()?{
????????????????
????????????????var?file?=?this.file
????????????????
????????????????var?chunkSize?=?5?*?1024?*?1024
????????????????
????????????????var?totalChunk?=?Math.ceil(file.size?/?chunkSize)
????????????????
????????????????var?chunks?=?[]
????????????????
????????????????for?(var?i?=?0;?i?<?totalChunk;?i++)?{
????????????????????
????????????????????var?start?=?i?*?chunkSize
????????????????????var?end?=?Math.min(file.size,?start?+?chunkSize)
????????????????????var?blob?=?file.slice(start,?end)
????????????????????
????????????????????chunks.push(blob)
????????????????}
????????????????console.log(totalChunk)
????????????????this.sliceUploadResult?=?Array(totalChunk).fill(0)
????????????????for?(let?i?=?0;?i?<?chunks.length;?i++)?{
????????????????????var?file?=?chunks[i];
????????????????????this.calculateMD5(file)
????????????????????????.then((md5)?=>?{
????????????????????????????console.log(md5);??
????????????????????????})
????????????????????????.catch((error)?=>?{
????????????????????????????console.error(error);??
????????????????????????});
????????????????}
????????????????return
????????????????
????????????????var?index?=?0;
????????????????
????????????????while?(index?<?totalChunk)?{
????????????????????console.log('------------------------------')
????????????????????params?=?{
????????????????????????"bucket":?"slice",
????????????????????????"filename":?index?+?"寂寞的季節(jié).mp4"
????????????????????}
????????????????????var?policyPromise?=?this.requestPolicy(params);
????????????????????(function?(index)?{
????????????????????????var?file?=?chunks[index]
????????????????????????policyPromise.then(function?(result)?{
????????????????????????????var?filename?=?result['key']
????????????????????????????console.log('準(zhǔn)備上傳文件：',?filename,?'，序號(hào)為：',?index)
????????????????????????????vm.uploadFile(file,?result).then(function?(result)?{
????????????????????????????????console.log('上傳完成：'?+?filename)
????????????????????????????????vm.sliceUploadResult[index]?=?('分片文件上傳成功：'?+?filename)
????????????????????????????})
????????????????????????})
????????????????????})(index)
????????????????????index++
????????????????}
????????????},
????????????sliceComposeEvent()?{
????????????????var?parmas?=?{}
????????????????$.ajax({
????????????????????method:?'POST',
????????????????????url:?'http://localhost:8888/compose',
????????????????????data:?formData,
????????????????????dataType:?'json',
????????????????????contentType:?false,?
????????????????????processData:?false,?
????????????????????
????????????????????xhr:?function?xhr()?{
????????????????????????
????????????????????????var?xhr?=?$.ajaxSettings.xhr();
????????????????????????if?(xhr.upload)?{
????????????????????????????
????????????????????????????xhr.upload.addEventListener('progress',?function?(e)?{
????????????????????????????????
????????????????????????????????
????????????????????????????????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()
????????????????????}
????????????????})
????????????},
????????????calculateMD5(file)?{
????????????????return?new?Promise((resolve,?reject)?=>?{
????????????????????const?reader?=?new?FileReader();
????????????????????
????????????????????reader.readAsArrayBuffer(file);
????????????????????reader.onload?=?()?=>?{
????????????????????????const?spark?=?new?SparkMD5.ArrayBuffer();
????????????????????????spark.append(reader.result);??
????????????????????????const?md5?=?spark.end();??
????????????????????????resolve(md5);
????????????????????};
????????????????????reader.onerror?=?(error)?=>?{
????????????????????????reject(error);
????????????????????};
????????????????});
????????????}
????????},
????????mounted()?{
????????},
????????created()?{
????????},
????});
</script>
</body>
</html>
參考資料
[1]文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-756412.html
http://mylocalhost:9001: https://link.juejin.cn/?target=http%3A%2F%2Fmylocalhost%3A9001文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-756412.html
到了這里，關(guān)于Spring Boot整合Minio實(shí)現(xiàn)上傳憑證、分片上傳、秒傳和斷點(diǎn)續(xù)傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
