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

这篇具有很好参考价值的文章主要介绍了Spring Boot整合Minio实现上传凭证、分片上传、秒传和断点续传。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

概述

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

  1. 文件上传到后端,由后端保存到Minio

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

    缺点也很明显:

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

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

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

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

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

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

环境准备

  • 部署好的Minio环境:http://mylocalhost:9001[1]

Spring Boot整合Minio

简单过一下整合方式把。

先引入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

定义一个属性类

@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");
    }

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

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

  • 上传权限

  • 可上传的文件大小

  • 可上传的文件类型

请求参数类:

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, 
            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()
            }
        })
    }))
},

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

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

分片上传

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

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

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

秒传

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

3cc1f3c3c2d1a29ecf60ffad4de278c7

然后拼接上文件名:

3cc1f3c3c2d1a29ecf60ffad4de278c7_寂寞的季节.mp4

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

这样的好处是:

  • 降低Minio服务器压力

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

断点续传

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

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

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

文件合并

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

@GetMapping("/compose")
public void merge() {
    List<ComposeSource> sources = new ArrayList<>();
    
    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, 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),
                        
                        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, 
                        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 + "寂寞的季节.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, 
                    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]

http://mylocalhost:9001: https://link.juejin.cn/?target=http%3A%2F%2Fmylocalhost%3A9001文章来源地址https://www.toymoban.com/news/detail-756412.html

到了这里,关于Spring Boot整合Minio实现上传凭证、分片上传、秒传和断点续传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • springboot整合vue2-uploader文件分片上传、秒传、断点续传

    vue-simple-uploader 是基于 simple-uploader.js 封装的vue上传插件。它的优点包括且不限于以下几种: 支持文件、多文件、文件夹上传;支持拖拽文件、文件夹上传 可暂停、继续上传 错误处理 支持“秒传”,通过文件判断服务端是否已存在从而实现“秒传” 分片上传 支持进度、预估

    2024年02月06日
    浏览(61)
  • 前端 + 后端 实现分片上传(断点续传/极速秒传)

    先记录下,后面有时间再去实现 (已实现,可参考 SpringBoot+vue文件上传下载预览大文件分片上传文件上传进度 SpringBoot+vue 大文件分片下载) 可参考链接:vue上传大文件/视频前后端(java)代码 前端slice分片上传,后端用表记录分片索引和分片大小和分片总数,当接受完最后

    2023年04月17日
    浏览(51)
  • Spring Boot + MinIO 实现文件切片极速上传技术

    🎉欢迎来到SpringBoot框架学习专栏~ ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:SpringBoot 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果文中出现错误,希望大家能指

    2024年02月04日
    浏览(56)
  • minio + linux + docker + spring boot实现文件上传与下载

    检查linux内核,必须是3.10以上 安装docker 启动docker 搜索镜像 拉取镜像 启动minio -p: 指定端口映射,格式为:主机端口:容器端口 (这里注意要映射两个,否则API会访问不到) -e “MINIO_ROOT_USER=vinci” minio用户名; -e MINIO_SECRET_KEY=123456 minio 密码 -d: 后台运行容器,并返回容器ID; -

    2024年02月07日
    浏览(60)
  • 【万字长文】Vue+SpringBoot实现大文件秒传、断点续传和分片上传完整教程(提供Gitee源码)

    前言:最近在实际项目中碰到一个需求,客户可能会上传比较大的文件,如果采用传统的文件上传方案可能会存在服务器压力大、资源浪费甚至内存溢出的一些安全风险,所以为了解决一系列问题,需要采用新的技术方案来实现大文件的上传;空闲的时候参考了网上的一些相

    2024年02月12日
    浏览(47)
  • Minio文件分片上传实现

    资源准备 MacM1Pro 安装Parallels19.1.0请参考 https://blog.csdn.net/qq_41594280/article/details/135420241 MacM1Pro Parallels安装CentOS7.9请参考 https://blog.csdn.net/qq_41594280/article/details/135420461 部署Minio和整合SpringBoot请参考 https://blog.csdn.net/qq_41594280/article/details/135613722 Minio Paralles虚拟机文件百度网盘获取

    2024年01月21日
    浏览(42)
  • springboot实现minio文件分片上传

    在Spring Boot中实现MinIO的文件分片上传涉及到几个关键步骤。MinIO是一个高性能的分布式对象存储服务,它兼容Amazon S3的API。分片上传主要用于上传大文件,将大文件分成多个部分,分别上传,最后再将这些部分合并成一个完整的文件。这样做的好处是提高了上传的可靠性,并

    2024年01月17日
    浏览(61)
  • minio&前后端分离上传视频/上传大文件——前后端分离断点续传&minio分片上传实现

    🍀🍀🍀🍀分布式文件系统-minio: 第一章:分布式文件系统介绍与minio介绍与使用(附minio java client 使用) 第二章:minio前后端分离上传视频/上传大文件——前后端分离断点续传minio分片上传实现 断点续传指的是在下载或上传时,将下载或上传任务(一个文件或一个压缩包

    2024年02月03日
    浏览(55)
  • MinIO (五) .net core实现分片上传

    开发环境 Win11 vs2022 appsettings.json添加配置项 注入代码 接下来是后端进行分片上传的代码示例,有两个,第一个是从官方考下来的代码示例,第二个是自己整理后的代码示例。 从官方考下来的代码示例 整理后的后端进行分片上传

    2024年02月03日
    浏览(44)
  • Minio大文件分片上传、断点续传实现

    使用minio api实现分片上传及断点续传功能。 前端准备:获取大文件的MD5值,将文件分片,5M为一分片,排好顺序,并按顺序命名(1,2,3这种后面比较好合并) 在上传分片阶段,前端有上传进度条 1、检验文件MD5值 1.1 redis中查看MD5是否存在 1.2 判断临时文件夹是否存在 boolean d

    2024年02月09日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包