专业编程基础技术教程

网站首页 > 基础教程 正文

Spring Boot整合Minio实现上传凭证、分片上传、秒传和断点续传

ccvgpt 2025-03-06 12:32:58 基础教程 1 ℃

概述

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

  1. 文件上传到后端，由后端保存到Minio
  2. 这种方式好处是完全由后端集中管理，可以很好的做到、身份验证、权限控制、文件与处理等，并且可以做一些额外的业务逻辑，比如生成缩略图、提取元数据等。
  3. 缺点也很明显：
  4. 延迟时间高了，本来花费上传一次文件的时间，现在多了后端保存到Minio的时间
  5. 后端资源占用，后端本来可以只处理业务请求，现在还要负责文件流，增加了性能压力
  6. 单点故障，Minio即便做了集群，但是如果后端服务器故障，也会导致Minio不可用
  7. 所以，实际上我们不会把文件传到后端，而是直接传给Minio，其实这也符合OSS服务的使用方式。
  8. 文件向后端申请上传凭证，然后直接上传到Minio
  9. 为了避免Minio被攻击，我们需要结合后端，让后端生成并返回一个有时效的上传凭证，前端拿着这个凭证才能去上传，通过这种方式，我们可以做到一定程度的权限控制，本文要分享的就是这种方式。

环境准备

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

Spring Boot整合Minio

简单过一下整合方式把。

Spring Boot整合Minio实现上传凭证、分片上传、秒传和断点续传

先引入Minio依赖

# pom.xml 
 
  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; ...
}

定义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 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;
}

上面的示例代码可以知道，我们还可以加一些权限认证，以判断用户是否有以下权限：

  • 上传权限
  • 可上传的文件大小
  • 可上传的文件类型

请求参数类：

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 
   <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> 
 
 

 
    

{{title}}


 
      
      

  
   


        

 
         

 
           
{{ key }}: {{ val }}

    
 

 
             

                

 
                 

                 

 --- 

 
                   
  |  



              
 
            
 
              
{{uploadResult}}
 

      
  • {{ item }}
    •  
 
 
 
       <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.calculatemd5file> { 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.thenfunction result var filename='result['key']' console.log filename index vm.uploadfilefile result.thenfunction result console.log filename vm.sliceuploadresultindex='('分片文件上传成功：'' filename index index slicecomposeevent var parmas='{}' .ajax method: post url: http:localhost:8888compose 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.addeventlistenerprogress function e e.loaded e.total var percentage='parseInt(e.loaded' e.total 100 vm.uploadresult='percentage' policykey false return xhr success: function result vm.uploadresult='文件上传成功：' policykey resolveresult error: function e reject calculatemd5file return new promiseresolve> { 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>

Tags：

猜你喜欢

最近发表
标签列表