• SpringBoot+Minio实现上传凭证、分片上传、秒传和断点续传

    Spring Boot整合Minio后，前端的文件上传有两种方式：

    1、文件上传到后端，由后端保存到Minio

    这种方式好处是完全由后端集中管理，可以很好的做到、身份验证、权限控制、文件与处理等，并且可以做一些额外的业务逻辑，比如生成缩略图、提取元数据等。

    缺点也很明显：

    • 延迟时间高了，本来花费上传一次文件的时间，现在多了后端保存到Minio的时间

    • 后端资源占用，后端本来可以只处理业务请求，现在还要负责文件流，增加了性能压力

    • 单点故障，Minio即便做了集群，但是如果后端服务器故障，也会导致Minio不可用

    所以，实际上我们不会把文件传到后端，而是直接传给Minio，其实这也符合OSS服务的使用方式。

    2、文件向后端申请上传凭证，然后直接上传到Minio

    为了避免Minio被攻击，我们需要结合后端，让后端生成并返回一个有时效的上传凭证，前端拿着这个凭证才能去上传，通过这种方式，我们可以做到一定程度的权限控制，本文要分享的就是这种方式。

    环境准备

    部署好的Minio环境：http://mylocalhost:9001

    Spring Boot整合Minio

    简单过一下整合方式把。

    先引入Minio依赖
    1. <dependency>
    2.     <groupId>io.minio</groupId>
    3.     <artifactId>minio</artifactId>
    4.     <version>7.1.0</version>
    5. </dependency>
    然后定义配置信息
    1. # application.yml
    2. minio:
    3.   endpoint: http://mylocalhost:9001
    4.   accessKey: minio
    5.   secretKey: minio123
    6.   bucket: demo
    定义一个属性类
    1. @Component
    2. @ConfigurationProperties(prefix = "minio")
    3. public class MinioProperties {
    4.     /**
    5.      * 对象存储服务的URL
    6.      */
    7.     private String endpoint;
    8.     /**
    9.      * Access key就像用户ID，可以唯一标识你的账户
    10.      */
    11.     private String accessKey;
    12.     /**
    13.      * Secret key是你账户的密码
    14.      */
    15.     private String secretKey;
    16.  
    17.     /**
    18.      * 默认文件桶
    19.      */
    20.     private String bucket;
    21.     
    22.     ...
    23. }
    定义Minio配置类
    1. @Configuration
    2. public class MinioConfig {
    3.     @Bean
    4.     public MinioClient minioClient(MinioProperties properties){
    5.         try {
    6.             MinioClient.Builder builder = MinioClient.builder();
    7.             builder.endpoint(properties.getEndpoint());
    8.             if (StringUtils.hasLength(properties.getAccessKey()) && StringUtils.hasLength(properties.getSecretKey())) {
    9.                 builder.credentials(properties.getAccessKey(),properties.getSecretKey());
    10.             }
    11.             return builder.build();
    12.         } catch (Exception e) {
    13.             return null;
    14.         }
    15.     }
    16. }

    现在启动服务即可。

    上传凭证

    写一个接口，返回上传凭证：

    1. @RequestMapping(value = "/presign", method = {RequestMethod.POST})
    2. public Map<String, String> presign(@RequestBody PresignParam presignParam) {
    3.     // 如果前端不指定桶，那么给一个默认的
    4.     if (StringUtils.isEmpty(presignParam.getBucket())) {
    5.         presignParam.setBucket("demo");
    6.     }
    7.  
    8.     // 前端不指定文件名称，就给一个UUID
    9.     if (StringUtils.isEmpty(presignParam.getFilename())) {
    10.         presignParam.setFilename(UUID.randomUUID().toString());
    11.     }
    12.  
    13.     // 如果想要以子目录的方式保存，就在前面加上斜杠来表示
    14.     //        presignParam.setFilename("/2023/" + presignParam.getFilename());
    15.  
    16.     // 设置凭证过期时间
    17.     ZonedDateTime expirationDate = ZonedDateTime.now().plusMinutes(10);
    18.     // 创建一个凭证
    19.     PostPolicy policy = new PostPolicy(presignParam.getBucket(), presignParam.getFilename(), expirationDate);
    20.     // 限制文件大小，单位是字节byte，也就是说可以设置如：只允许10M以内的文件上传
    21.     //        policy.setContentRange(1, 10 * 1024);
    22.     // 限制上传文件请求的ContentType
    23.     //        policy.setContentType("image/png");
    24.  
    25.     try {
    26.         // 生成凭证并返回
    27.         final Map<String, String> map = minioClient.presignedPostPolicy(policy);
    28.         for (Map.Entry<String, String> entry : map.entrySet()) {
    29.             System.out.println(entry.getKey() + " = " + entry.getValue());
    30.         }
    31.         return map;
    32.     } catch (MinioException | InvalidKeyException | IOException | NoSuchAlgorithmException e) {
    33.         e.printStackTrace();
    34.     }
    35.  
    36.     return null;
    37. }

    上面的示例代码可以知道，关注公众号：码猿技术专栏，回复关键词：1111 获取阿里内部Java性能调优手册的！我们还可以加一些权限认证，以判断用户是否有以下权限：

    • 上传权限

    • 可上传的文件大小

    • 可上传的文件类型

    请求参数类：

    1. public class PresignParam {
    2.     // 桶名
    3.     private String bucket;
    4.  
    5.     // 文件名
    6.     private String filename;
    7.     
    8.     ...
    9. }

    这个接口的返回结果是：

    1. bucket: demo
    2. x-amz-date: 20230831T042351Z
    3. x-amz-signature: 79cc2ae0baee274d1d47cb29bdd5e99127059033503c2a02f904f0478a73ecac
    4. key: 寂寞的季节.mp4
    5. x-amz-algorithm: AWS4-HMAC-SHA256
    6. x-amz-credential: minio/20230831/us-east-1/s3/aws4_request
    7. policy: eyJleHBpcmF0aW9uIjoiMjAyMy0wOC0zMVQwNDozMzo1MS42MzZaIiwiY29uZGl0aW9ucyI6W1siZXEiLCIkYnVja2V0IiwiZGVtbyJdLFsiZXEiLCIka2V5Iiwi5a+C5a+e55qE5a2j6IqCLm1wNCJdLFsiZXEiLCIkeC1hbXotYWxnb3JpdGhtIiwiQVdTNC1ITUFDLVNIQTI1NiJdLFsiZXEiLCIkeC1hbXotY3JlZGVudGlhbCIsIm1pbmlvLzIwMjMwODMxL3VzLWVhc3QtMS9zMy9hd3M0X3JlcXVlc3QiXSxbImVxIiwiJHgtYW16LWRhdGUiLCIyMDIzMDgzMVQwNDIzNTFaIl1dfQ==

    • bucket：表示目标桶

    • x-amz-date：时间戳

    • x-amz-signature：签名

    • key：文件名

    • x-amz-algorithm：签名算法

    • x-amz-credential：认证授权

    • policy：凭证token

    前端收到后，将该凭证连同文件流一并上传到Minio服务器：

    1. uploadFile(file, policy) {
    2.     console.log("准备上传文件：")
    3.     console.log("file：" + file)
    4.     console.log("policy：" + policy)
    5.     var formData = new FormData()
    6.  
    7.     formData.append('file', file)
    8.     formData.append('key', policy['key'])
    9.     formData.append('x-amz-algorithm', policy['x-amz-algorithm'])
    10.     formData.append('x-amz-credential', policy['x-amz-credential'])
    11.     formData.append('x-amz-signature', policy['x-amz-signature'])
    12.     formData.append('x-amz-date', policy['x-amz-date'])
    13.     formData.append('policy', policy['policy'])
    14.  
    15.     return new Promise(((resolve, reject) => {
    16.         $.ajax({
    17.             method: 'POST',
    18.             url: 'http://mylocalhost:9001/' + policy['bucket'],
    19.             data: formData,
    20.             dataType: 'json',
    21.             contentType: false, // 必须设置为 false，不设置 contentType，让浏览器自动设置
    22.             processData: false, // 必须设置为 false，不对 FormData 进行序列化处理
    23.             // async: false, // 设置同步，方便等下做分片上传
    24.             xhr: function xhr() {
    25.                 //获取原生的xhr对象
    26.                 var xhr = $.ajaxSettings.xhr();
    27.                 if (xhr.upload) {
    28.                     //添加 progress 事件监听
    29.                     xhr.upload.addEventListener('progress', function (e) {
    30.                         //e.loaded 已上传文件字节数
    31.                         //e.total 文件总字节数
    32.                         var percentage = parseInt(e.loaded / e.total * 100)
    33.                         vm.uploadResult = percentage + "%" + "：" + policy['key']
    34.                     }, false);
    35.                 }
    36.                 return xhr;
    37.             },
    38.             success: function (result) {
    39.                 vm.uploadResult = '文件上传成功：' + policy['key']
    40.                 resolve(result)
    41.             },
    42.             error: function (e) {
    43.                 reject()
    44.             }
    45.         })
    46.     }))
    47. },

    这样就完成了获取上传凭证并上传文件。

    分片上传、秒传、断点续传

    分片上传

    分片上传可以用在大文件上传上，一个100M的文件可以分成10份，每份10M，一共传输10次，这有以下好处：

    • Minio做了集群，用Nginx转发，那么分片上传可以降低单台Minio服务器的性能压力

    • 多线程上传可以加快上传效率

    秒传

    现在说说秒传，我们上传一个文件之前，可以用工具生成MD5字符串，就好像这样：

    3cc1f3c3c2d1a29ecf60ffad4de278c7

    然后拼接上文件名：

    3cc1f3c3c2d1a29ecf60ffad4de278c7_寂寞的季节.mp4

    这时候去向后端申请上传凭证的时候，后端可以先去看看文件是否已存在，如果文件已存在，就不用生成凭证了，直接告诉前端该文件已经上传完毕，由此实现文件秒传。

    这样的好处是：

    • 降低Minio服务器压力

    • 响应秒回，用户体验提高

    断点续传

    结合分片上传和秒传的原理，我们可以来做到断点续传。

    场景： 当我们要上传一个大文件的时候，进度到一半了，这时候网络掉线导致上传失败，网络恢复后又要重新上传，这就很崩溃。

    处理方式： 大文件也可以分成一个个小文件来上传，这样即便上传到一半网络掉线，恢复上传的时候可以跳过前一半已上传的部分，接着上传后面一半。

    文件合并

    当我们分片上传后，后端还需要提供接口，来将所有分片数据合并：

    1. @GetMapping("/compose")
    2. public void merge() {
    3.     List<ComposeSource> sources = new ArrayList<>();
    4.     // 分片数据放到另一个桶里面：slice
    5.     sources.add(ComposeSource.builder()
    6.                 .bucket("slice")
    7.                 .object("0寂寞的季节.mp4")
    8.                 .build());
    9.     sources.add(ComposeSource.builder()
    10.                 .bucket("slice")
    11.                 .object("1寂寞的季节.mp4")
    12.                 .build());
    13.     sources.add(ComposeSource.builder()
    14.                 .bucket("slice")
    15.                 .object("2寂寞的季节.mp4")
    16.                 .build());
    17.     final ComposeObjectArgs args = ComposeObjectArgs.builder()
    18.         .bucket("demo")
    19.         .object("寂寞的季节.mp4")
    20.         .sources(sources)
    21.         .build();
    22.  
    23.     try {
    24.         minioClient.composeObject(args);
    25.     } catch (MinioException | InvalidKeyException | IOException | NoSuchAlgorithmException e) {
    26.         e.printStackTrace();
    27.     }
    28. }

    上面的示例很简单，因为只做演示说明。

    前端需要传的参数是：

    • 分片桶：slice

    • 分片数据数组：

      • 0寂寞的季节.mp4

      • 1寂寞的季节.mp4

      • 2寂寞的季节.mp4

    • 目标桶：demo

    然后调用composeObject函数完成合并。

    前端示例代码分享

    上面就是关于实战经验分享的全部了，因为需要前端配置来使用，所以这里给出我这篇文章的前端示例，很简单的单页面（技术栈就别吐槽了）：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
    7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    8.     <script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
    9. </head>
    10. <body>
    11. <div id="app">
    12.  
    13.     <h1>{{title}}</h1>
    14.     <br>
    15.  
    16.     <form @submit.prevent="getPolicyForm">
    17.  
    18.         <label>
    19.             桶名
    20.             <input type="text" v-model="policyParams.bucket">
    21.         </label>
    22.         <br>
    23.         <label>
    24.             文件名
    25.             <input type="text" v-model="policyParams.filename">
    26.         </label>
    27.         <br>
    28.         <button type="submit">获取上传凭证</button>
    29.         <br>
    30.         <div v-for="(val, key) in policy" :key="key">{{ key }}: <span>{{ val }}</span></div>
    31.     </form>
    32.  
    33.     <br>
    34.  
    35.     <form @submit.prevent="uploadFileForm" v-show="policy != null">
    36.         <label>
    37.             文件
    38.             <input type="file" @change="fileChange">
    39.         </label>
    40.         <br>
    41.         <br>
    42.         <button type="submit" v-show="file != null">上传文件</button>
    43.  
    44.     </form>
    45.  
    46.     ---
    47.     <br>
    48.  
    49.  
    50.     <div v-show="file != null">
    51.         <button @click="sliceEvent">测试文件分片上传</button>
    52.         |
    53.         <button @click="sliceComposeEvent">分片文件合并</button>
    54.     </div>
    55.  
    56.  
    57.     <br>
    58.     <br>
    59.     <br>
    60.     <p>{{uploadResult}}</p>
    61.     <ul>
    62.         <!--        <li v-for="item in sliceUploadResult">{{ item }}</li>-->
    63.         <li v-for="(item, index) in sliceUploadResult" :key="index">{{ item }}</li>
    64.  
    65.     </ul>
    66.     <br>
    67.  
    68. </div>
    69.  
    70. <script>
    71.     var vm = new Vue({
    72.         el: "#app",
    73.         data() {
    74.             return {
    75.                 title: "Minio测试"
    76.                 // 请求凭证参数
    77.                 , policyParams: {
    78.                     bucket: null
    79.                     , filename: null
    80.                 }
    81.                 // 请求到的凭证
    82.                 , policy: null
    83.                 // 待上传文件
    84.                 , file: null
    85.  
    86.                 // 上传文件参数
    87.                 , uploadParams: {
    88.                     file: null
    89.                 }
    90.  
    91.                 // 分片上传参数
    92.                 , sliceParams: {
    93.                     bucket: ""
    94.                     , filename: ""
    95.                     , file: null
    96.                 }
    97.                 , slicePolicys: []
    98.                 , sliceCount: 0
    99.  
    100.                 // 上传结果回调
    101.                 , uploadResult: null
    102.                 // 分片上传结果回调
    103.                 , sliceUploadResult: null
    104.             };
    105.         },
    106.         methods: {
    107.             getPolicyForm() {
    108.                 this.policyParams.bucket = "demo"
    109.                 this.policyParams.filename = "寂寞的季节.mp4"
    110.                 this.requestPolicy(this.policyParams)
    111.             },
    112.             requestPolicy(params) {
    113.                 return new Promise(((resolve, reject) => {
    114.                     $.ajax({
    115.                         type: "POST",
    116.                         url: "http://localhost:8888/presign",
    117.                         contentType: "application/json",
    118.                         data: JSON.stringify(params),
    119.                         // async: false,
    120.                         success: function (result) {
    121.                             console.log(result)
    122.                             vm.policy = result;
    123.                             resolve(result)
    124.                         },
    125.                         error: function (e) {
    126.                             reject()
    127.                         }
    128.                     });
    129.                 }))
    130.  
    131.             },
    132.             fileChange(event) {
    133.                 const file = event.target.files[0]
    134.                 this.file = file
    135.             },
    136.             uploadFileForm() {
    137.                 this.uploadFile(this.file, this.policy)
    138.             },
    139.  
    140.             uploadFile(file, policy) {
    141.                 console.log("准备上传文件：")
    142.                 console.log("file：" + file)
    143.                 console.log("policy：" + policy)
    144.                 var formData = new FormData()
    145.  
    146.                 formData.append('file', file)
    147.                 formData.append('key', policy['key'])
    148.                 formData.append('x-amz-algorithm', policy['x-amz-algorithm'])
    149.                 formData.append('x-amz-credential', policy['x-amz-credential'])
    150.                 formData.append('x-amz-signature', policy['x-amz-signature'])
    151.                 formData.append('x-amz-date', policy['x-amz-date'])
    152.                 formData.append('policy', policy['policy'])
    153.  
    154.                 return new Promise(((resolve, reject) => {
    155.                     $.ajax({
    156.                         method: 'POST',
    157.                         url: 'http://mylocalhost:9001/' + policy['bucket'],
    158.                         data: formData,
    159.                         dataType: 'json',
    160.                         contentType: false, // 必须设置为 false，不设置 contentType，让浏览器自动设置
    161.                         processData: false, // 必须设置为 false，不对 FormData 进行序列化处理
    162.                         // async: false, // 设置同步，方便等下做分片上传
    163.                         xhr: function xhr() {
    164.                             //获取原生的xhr对象
    165.                             var xhr = $.ajaxSettings.xhr();
    166.                             if (xhr.upload) {
    167.                                 //添加 progress 事件监听
    168.                                 xhr.upload.addEventListener('progress', function (e) {
    169.                                     //e.loaded 已上传文件字节数
    170.                                     //e.total 文件总字节数
    171.                                     var percentage = parseInt(e.loaded / e.total * 100)
    172.                                     vm.uploadResult = percentage + "%" + "：" + policy['key']
    173.                                 }, false);
    174.                             }
    175.                             return xhr;
    176.                         },
    177.                         success: function (result) {
    178.                             vm.uploadResult = '文件上传成功：' + policy['key']
    179.                             resolve(result)
    180.                         },
    181.                         error: function (e) {
    182.                             reject()
    183.                         }
    184.                     })
    185.                 }))
    186.             },
    187.             sliceEvent() {
    188.                 // 获取文件
    189.                 var file = this.file
    190.                 // 设置分片大小：5MB
    191.                 var chunkSize = 5 * 1024 * 1024
    192.                 // 计算总共有多少个分片
    193.                 var totalChunk = Math.ceil(file.size / chunkSize)
    194.                 // 数组存放所有分片
    195.                 var chunks = []
    196.                 // 遍历所有分片
    197.                 for (var i = 0; i < totalChunk; i++) {
    198.                     // 利用slice获取分片
    199.                     var start = i * chunkSize
    200.                     var end = Math.min(file.size, start + chunkSize)
    201.                     var blob = file.slice(start, end)
    202.                     // 添加分片到数组
    203.                     chunks.push(blob)
    204.                 }
    205.  
    206.                 console.log(totalChunk)
    207.  
    208.                 this.sliceUploadResult = Array(totalChunk).fill(0)
    209.  
    210.                 for (let i = 0; i < chunks.length; i++) {
    211.                     var file = chunks[i];
    212.                     this.calculateMD5(file)
    213.                         .then((md5) => {
    214.                             console.log(md5);  // 输出计算出的 MD5 值
    215.                         })
    216.                         .catch((error) => {
    217.                             console.error(error);  // 处理错误
    218.                         });
    219.                 }
    220.  
    221.  
    222.                 return
    223.  
    224.                 // 创建序号
    225.                 var index = 0;
    226.                 // 循环上传分片
    227.                 while (index < totalChunk) {
    228.                     console.log('------------------------------')
    229.                     params = {
    230.                         "bucket": "slice",
    231.                         "filename": index + "寂寞的季节.mp4"
    232.                     }
    233.                     var policyPromise = this.requestPolicy(params);
    234.                     (function (index) {
    235.                         var file = chunks[index]
    236.                         policyPromise.then(function (result) {
    237.                             var filename = result['key']
    238.                             console.log('准备上传文件：', filename, '，序号为：', index)
    239.                             vm.uploadFile(file, result).then(function (result) {
    240.                                 console.log('上传完成：' + filename)
    241.                                 vm.sliceUploadResult[index] = ('分片文件上传成功：' + filename)
    242.                             })
    243.                         })
    244.                     })(index)
    245.  
    246.                     index++
    247.                 }
    248.             },
    249.             sliceComposeEvent() {
    250.                 var parmas = {}
    251.  
    252.                 $.ajax({
    253.                     method: 'POST',
    254.                     url: 'http://localhost:8888/compose',
    255.                     data: formData,
    256.                     dataType: 'json',
    257.                     contentType: false, // 必须设置为 false，不设置 contentType，让浏览器自动设置
    258.                     processData: false, // 必须设置为 false，不对 FormData 进行序列化处理
    259.                     // async: false, // 设置同步，方便等下做分片上传
    260.                     xhr: function xhr() {
    261.                         //获取原生的xhr对象
    262.                         var xhr = $.ajaxSettings.xhr();
    263.                         if (xhr.upload) {
    264.                             //添加 progress 事件监听
    265.                             xhr.upload.addEventListener('progress', function (e) {
    266.                                 //e.loaded 已上传文件字节数
    267.                                 //e.total 文件总字节数
    268.                                 var percentage = parseInt(e.loaded / e.total * 100)
    269.                                 vm.uploadResult = percentage + "%" + "：" + policy['key']
    270.                             }, false);
    271.                         }
    272.                         return xhr;
    273.                     },
    274.                     success: function (result) {
    275.                         vm.uploadResult = '文件上传成功：' + policy['key']
    276.                         resolve(result)
    277.                     },
    278.                     error: function (e) {
    279.                         reject()
    280.                     }
    281.                 })
    282.             },
    283.             calculateMD5(file) {
    284.                 return new Promise((resolve, reject) => {
    285.                     const reader = new FileReader();
    286.  
    287.                     // 读取文件内容
    288.                     reader.readAsArrayBuffer(file);
    289.  
    290.                     reader.onload = () => {
    291.                         const spark = new SparkMD5.ArrayBuffer();
    292.                         spark.append(reader.result);  // 将文件内容添加到 MD5 计算器中
    293.                         const md5 = spark.end();  // 计算 MD5 值
    294.  
    295.                         resolve(md5);
    296.                     };
    297.  
    298.                     reader.onerror = (error) => {
    299.                         reject(error);
    300.                     };
    301.                 });
    302.             }
    303.         },
    304.         mounted() {
    305.         },
    306.         created() {
    307.         },
    308.     });
    309.  
    310. </script>
    311. </body>
    312. </html>
  • 相关阅读:
    搭建WAMP网站教程（Windows+Apache+MySQL+PHP）
    运动耳机哪种佩戴方式好？佩戴稳固舒适的运动耳机
    sql报错：sql injection violation, syntax error
    有一说一，外包公司到底值不值得去？
    HDU 1009 FatMouse‘ Trade （贪心算法）
    小任务：简单实现银行业务系统（附 ideal编辑器固定序列化版本方法）
    分布式事务----seata
    Java面试题——继承，多态
    需求分析与系统设计 原书第3版
    MySQL InnoDB 引擎底层解析（三）
  • 原文地址：https://blog.csdn.net/m0_69632475/article/details/136476088