SpringBoot+Minio實(shí)現(xiàn)上傳憑證、分片上傳、秒傳和斷點(diǎn)續(xù)傳

Spring Boot整合Minio后，前端的文件上傳有兩種方式：

1、文件上傳到后端，由后端保存到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ù)的使用方式。

2、文件向后端申請(qǐng)上傳憑證，然后直接上傳到Minio

為了避免Minio被攻擊，我們需要結(jié)合后端，讓后端生成并返回一個(gè)有時(shí)效的上傳憑證，前端拿著這個(gè)憑證才能去上傳，通過(guò)這種方式，我們可以做到一定程度的權(quán)限控制，本文要分享的就是這種方式。

環(huán)境準(zhǔn)備

部署好的Minio環(huán)境：http://mylocalhost:9001

Spring Boot整合Minio

簡(jiǎn)單過(guò)一下整合方式把。

先引入Minio依賴

<dependency>
    <groupId>io.minio</groupId>
    <artifactId>minio</artifactId>
    <version>7.1.0</version>
</dependency>

然后定義配置信息

# application.yml
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) {
    // 如果前端不指定桶，那么給一個(gè)默認(rèn)的
    if (StringUtils.isEmpty(presignParam.getBucket())) {
        presignParam.setBucket("demo");
    }

    // 前端不指定文件名稱，就給一個(gè)UUID
    if (StringUtils.isEmpty(presignParam.getFilename())) {
        presignParam.setFilename(UUID.randomUUID().toString());
    }

    // 如果想要以子目錄的方式保存，就在前面加上斜杠來(lái)表示
    //        presignParam.setFilename("/2023/" + presignParam.getFilename());

    // 設(shè)置憑證過(guò)期時(shí)間
    ZonedDateTime expirationDate = ZonedDateTime.now().plusMinutes(10);
    // 創(chuàng)建一個(gè)憑證
    PostPolicy policy = new PostPolicy(presignParam.getBucket(), presignParam.getFilename(), expirationDate);
    // 限制文件大小，單位是字節(jié)byte，也就是說(shuō)可以設(shè)置如：只允許10M以內(nèi)的文件上傳
    //        policy.setContentRange(1, 10 * 1024);
    // 限制上傳文件請(qǐng)求的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;
}

上面的示例代碼可以知道，我們還可以加一些權(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, // 必須設(shè)置為 false，不設(shè)置 contentType，讓瀏覽器自動(dòng)設(shè)置
            processData: false, // 必須設(shè)置為 false，不對(duì) FormData 進(jìn)行序列化處理
            // async: false, // 設(shè)置同步，方便等下做分片上傳
            xhr: function xhr() {
                //獲取原生的xhr對(duì)象
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    //添加 progress 事件監(jiān)聽
                    xhr.upload.addEventListener('progress', function (e) {
                        //e.loaded 已上傳文件字節(jié)數(shù)
                        //e.total 文件總字節(jié)數(shù)
                        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í)候可以跳過(guò)前一半已上傳的部分，接著上傳后面一半。

文件合并

當(dāng)我們分片上傳后，后端還需要提供接口，來(lái)將所有分片數(shù)據(jù)合并：

@GetMapping("/compose")
public void merge() {
    List<ComposeSource> sources = new ArrayList<>();
    // 分片數(shù)據(jù)放到另一個(gè)桶里面：slice
    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 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測(cè)試"
                // 請(qǐng)求憑證參數(shù)
                , policyParams: {
                    bucket: null
                    , filename: null
                }
                // 請(qǐng)求到的憑證
                , policy: null
                // 待上傳文件
                , file: null

                // 上傳文件參數(shù)
                , uploadParams: {
                    file: null
                }

                // 分片上傳參數(shù)
                , sliceParams: {
                    bucket: ""
                    , filename: ""
                    , file: null
                }
                , slicePolicys: []
                , sliceCount: 0

                // 上傳結(jié)果回調(diào)
                , uploadResult: null
                // 分片上傳結(jié)果回調(diào)
                , 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),
                        // 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("準(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, // 必須設(shè)置為 false，不設(shè)置 contentType，讓瀏覽器自動(dòng)設(shè)置
                        processData: false, // 必須設(shè)置為 false，不對(duì) FormData 進(jìn)行序列化處理
                        // async: false, // 設(shè)置同步，方便等下做分片上傳
                        xhr: function xhr() {
                            //獲取原生的xhr對(duì)象
                            var xhr = $.ajaxSettings.xhr();
                            if (xhr.upload) {
                                //添加 progress 事件監(jiān)聽
                                xhr.upload.addEventListener('progress', function (e) {
                                    //e.loaded 已上傳文件字節(jié)數(shù)
                                    //e.total 文件總字節(jié)數(shù)
                                    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
                // 設(shè)置分片大?。?MB
                var chunkSize = 5 * 1024 * 1024
                // 計(jì)算總共有多少個(gè)分片
                var totalChunk = Math.ceil(file.size / chunkSize)
                // 數(shù)組存放所有分片
                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)
                    // 添加分片到數(shù)組
                    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);  // 輸出計(jì)算出的 MD5 值
                        })
                        .catch((error) => {
                            console.error(error);  // 處理錯(cuò)誤
                        });
                }


                return

                // 創(chuàng)建序號(hào)
                var index = 0;
                // 循環(huán)上傳分片
                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, // 必須設(shè)置為 false，不設(shè)置 contentType，讓瀏覽器自動(dòng)設(shè)置
                    processData: false, // 必須設(shè)置為 false，不對(duì) FormData 進(jìn)行序列化處理
                    // async: false, // 設(shè)置同步，方便等下做分片上傳
                    xhr: function xhr() {
                        //獲取原生的xhr對(duì)象
                        var xhr = $.ajaxSettings.xhr();
                        if (xhr.upload) {
                            //添加 progress 事件監(jiān)聽
                            xhr.upload.addEventListener('progress', function (e) {
                                //e.loaded 已上傳文件字節(jié)數(shù)
                                //e.total 文件總字節(jié)數(shù)
                                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();

                    // 讀取文件內(nèi)容
                    reader.readAsArrayBuffer(file);

                    reader.onload = () => {
                        const spark = new SparkMD5.ArrayBuffer();
                        spark.append(reader.result);  // 將文件內(nèi)容添加到 MD5 計(jì)算器中
                        const md5 = spark.end();  // 計(jì)算 MD5 值

                        resolve(md5);
                    };

                    reader.onerror = (error) => {
                        reject(error);
                    };
                });
            }
        },
        mounted() {
        },
        created() {
        },
    });

</script>
</body>
</html>