网上关于minio分片上传的资料不太详细，缺斤少两，所以我基于他们的代码做了一些修改，demo能够正常运行起来，但是偶尔也会发生一些小bug，不过这些都无伤大雅，最终目的是理解代码背后的逻辑和流程

流程：

1. 前端获取生成文件MD5，发送至后台判断是否有该文件缓存，有信息终止上传，无则开始进行文件分片  。这里，我为了简单方便实现便没有使用数据库，直接用redis存储文件信息；
2. 前端后端返回的结果进行分片，然后将文件分片的信息传输给后端，后端调用 minio 初始化，返回分片上传地址和 uploadId；
3. 前端则根据获取的分片上传地址直接通过axios上传分片文件，不走后端；
4. 上传完成后，前端发送请求至后端，后端调用 minio 合并文件；

流程图：

效果图

  1.vue前端

2. minio文件桶

一.前端vue代码（代码较多，我就分开贴）

 项目中使用到的类库：spark-md5、axios、element-ui；

spark-md5 主要用来计算文件MD5，安装命令：

npm install spark-md5 --S
npm install axios --S

   1.template 

2.scirpt

3.css

4.upload.js

import request from '@/utils/request'
//上传信息
export function uploadFileInfo(data){
    return request({
        url:'upload/multipart/uploadFileInfo',
        method:'post',
        data
    })
}
// 上传校验
export function checkUpload(MD5) {
    return request({
        url: `upload/multipart/check?md5=${MD5}`,
        method: 'get',
    })
};
// 初始化上传
export function initUpload(data) {
    return request({
        url: `upload/multipart/init`,
        method: 'post',
        data
    })
};
// 文件合并
export function mergeUpload(data) {
    return request({
        url: `upload/multipart/merge`,
        method: 'post',
        data
    })
};
//判断文件是否存在
export function fileIsExits(data) {
    return request({
        url: `upload/multipart/fileIsExits`,
        method: 'post',
        data
    })
};
 
 

5.request.js

import axios from 'axios'
// 创建 axios 实例
const service = axios.create({
  baseURL: "/api", // 环境的不同，对应不同的baseURL
  // transformRequest: [function(data) {
  //   return Qs.stringify(data)
  // }],
  //timeout: 5000 // 请求超时时间
})
 
 
//request请求拦截
service.interceptors.request.use(
  config => {
    // var token=getToken()
    // if (token) {
    //     config.headers.token = token // 让每个请求携带自定义token 请根据实际情况自行修改
    //   }
    return config;
},
  error => {
    // do something with request error
    return Promise.reject(error)
  }
)
 
 
//响应拦截
service.interceptors.response.use(
  response => {
    const res = response
    return res
  },
  error => {
    
    //这里还可以根据实际情况增加一些功能
    return Promise.reject(error)
  }
)
 
export default service
 

二.后端代码

后端使用的是springboot ，使用之前要启动minio，redis，否则文件上传会出现异常。这里我都是使用windows版的

1.controller,文件上传接口

package com.xy.fileservice.controller;
import com.xy.fileservice.entity.FileUploadInfo;
import com.xy.fileservice.service.UploadService;
import com.xy.fileservice.util.MinioUtils;
import com.xy.fileservice.util.ResponseResult;
import jakarta.annotation.Resource;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;
/**
 * minio上传流程
 *
 * 1.检查数据库中是否存在上传文件
 *
 * 2.根据文件信息初始化，获取分片预签名url地址，前端根据url地址上传文件
 *
 * 3.上传完成后，将分片上传的文件进行合并
 *
 * 4.保存文件信息到数据库
 */
@Slf4j
@RestController
@RequestMapping("/upload")
public class FileMinioController {
    @Resource
    private UploadService uploadService;
    @Resource
    private MinioUtils minioUtils;
    /**
     * 校验文件是否存在
     *
     * @param md5 String
     * @return ResponseResult