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

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

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

缺点也很明显：

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

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

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

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

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

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

  环境准备

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

  Spring Boot整合Minio

  简单过一下整合方式把。

  先引入Minio依赖

      io.minio    minio    7.1.0

  然后定义配置信息

  # application.ymlminio:  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配置类

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

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

  • 上传权限

  • 可上传的文件大小

  • 可上传的文件类型

    请求参数类：

    public class PresignParam {    // 桶名    private String bucket;    // 文件名    private String filename;        ...}

    这个接口的返回结果是：

    bucket: demox-amz-date: 20230831T042351Zx-amz-signature: 79cc2ae0baee274d1d47cb29bdd5e99127059033503c2a02f904f0478a73ecackey: 寂寞的季节.mp4x-amz-algorithm: AWS4-HMAC-SHA256x-amz-credential: minio/20230831/us-east-1/s3/aws4_requestpolicy: 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                
            {{title}}
                
                                    桶名                            
                                文件名                            
                    获取上传凭证        
                    {{ key }}: {{ val }}        
                                    文件                            
                    
                    上传文件        ---    
                        测试文件分片上传        |        分片文件合并        
                
                
                
            {{uploadResult}}
                

                    { item }}
          -->        {{ item }}
            
            
            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  {                            console.error(error);  // 处理错误                        });                }                return                // 创建序号                var index = 0;                // 循环上传分片                while (index  {                    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() {        },    });