vue2上传大文件到minio分片上传

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

npm install spark-md5 --S

npm install axios --S

页面

scirpt

css

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

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

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