概述
Spring Boot整合Minio后，前端的文件上傳有兩種方式：
- 文件上傳到后端，由后端保存到Minio
- 這種方式好處是完全由后端集中管理，可以很好的做到、身份驗證、權限控制、文件與處理等，并且可以做一些額外的業務邏輯，比如生成縮略圖、提取元數據等。
- 缺點也很明顯：
- 延遲時間高了，本來花費上傳一次文件的時間，現在多了后端保存到Minio的時間
- 后端資源占用，后端本來可以只處理業務請求，現在還要負責文件流，增加了性能壓力
- 單點故障，Minio即便做了集群，但是如果后端服務器故障，也會導致Minio不可用
- 所以，實際上我們不會把文件傳到后端，而是直接傳給Minio，其實這也符合OSS服務的使用方式。
- 文件向后端申請上傳憑證，然后直接上傳到Minio
- 為了避免Minio被攻擊，我們需要結合后端，讓后端生成并返回一個有時效的上傳憑證，前端拿著這個憑證才能去上傳，通過這種方式，我們可以做到一定程度的權限控制，本文要分享的就是這種方式。
環境準備
- 部署好的Minio環境：http://mylocalhost:9001
Spring Boot整合Minio
簡單過一下整合方式把。
先引入Minio依賴
# pom.xml
<dependency>
<groupId>io.minio</group Id>
<artifactId>minio</artifact Id>
<version>7.1.0</version>
</dependency>
然后定義配置信息
# 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; ...
}
定義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;
}
}
}
現在啟動服務即可。
上傳憑證
寫一個接口，返回上傳憑證：
@RequestMapping(value = "/presign", method = {RequestMethod.POST})
public Map<String, String> 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<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;
}
上面的示例代碼可以知道，我們還可以加一些權限認證，以判斷用戶是否有以下權限：
- 上傳權限
- 可上傳的文件大小
- 可上傳的文件類型
請求參數類：
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<ComposeSource> 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函數完成合并。
前端示例代碼分享
上面就是關于實戰經驗分享的全部了，因為需要前端配置來使用，所以這里給出我這篇文章的前端示例，很簡單的單頁面（技術棧就別吐槽了）：
<!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">測試文件分片上傳</button> | <button @click="sliceComposeEvent">分片文件合并</button> </div>
<br>
<br>
<br>
<p>{{uploadResult}}</p>
<ul> <!-- <li v-for="item in sliceUploadResult">{{ item }}</li>--> <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測試"
// 請求憑證參數 , 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 = "寂寞的季節.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),
// async: false, 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("準備上傳文件：") 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() }
})
}))
},
sliceEvent() {
// 獲取文件 var file = this.file
// 設置分片大小：5MB var chunkSize = 5 * 1024 * 1024
// 計算總共有多少個分片 var totalChunk = Math.ceil(file.size / chunkSize)
// 數組存放所有分片 var chunks = []
// 遍歷所有分片 for (var i = 0; i < totalChunk; i++) {
// 利用slice獲取分片 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);
// 輸出計算出的 MD5 值 }) .catch((error) => { console.error(error);
// 處理錯誤 }); } return
// 創建序號 var index = 0;
// 循環上傳分片 while (index < totalChunk) { console.log('------------------------------')
params = { "bucket": "slice", "filename": index + "寂寞的季節.mp4" } var policyPromise = this.requestPolicy(params); (function (index) { var file = chunks[index]
policyPromise.then(function (result) { var filename = result['key'] console.log('準備上傳文件：', filename, '，序號為：', 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,
// 必須設置為 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() }
})
},
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);
// 將文件內容添加到 MD5 計算器中 const md5 = spark.end();
// 計算 MD5 值 resolve(md5); };
reader.onerror = (error) => { reject(error);
};
});
}
}, mounted() {
}, created() {
},
});
</script>
</body>
</html>
