前言

在Web开发中，大文件的上传是必不可少的功能之一。本文将介绍如何使用SpringBoot整合minio实现一个简单的大文件上传网站。

一、项目介绍

项目下载

gitee：https://gitee.com/wusupweilgy/springboot-vue.git

1.项目运行 

2.技术栈

前端：vue2、element-ui组件、axios

后端：springboot、minio、mybatis-plus、redis

3.功能

• 断点续传
• 分片上传
• 前端显示上传进度条

  4.流程图
  

  基本分成3步完成上传，检查是否上传、获取分片上传的url列表和分片上传合并，所以这里我把文件上传分成了三张流程图，就是为了详细点，其实是一个流程。

  检查是否上传

  

  获取上传url 

  

   分片上传合并

   redis主要作用是缓存上传任务，因为如果是断点续传，需要查询上次上传的信息去查询已上传的分片信息，只要上传没有上传的分片即可。

  mysql主要作用是存储已完成上传的文件信息。如果下次上传的是同一个文件，数据库中存在就不用上传，直接返回数据库中的文件信息。

  二、前端实现

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

  npm install spark-md5 --S

  2.FileView.vue

  3.FileUtil.js（判断文件类型）

  /**
   * @param: fileName - 文件名称
   * @param: 数据返回 1) 无后缀匹配 - false
   * @param: 数据返回 2) 匹配图片 - image
   * @param: 数据返回 3) 匹配 txt - txt
   * @param: 数据返回 4) 匹配 excel - excel
   * @param: 数据返回 5) 匹配 word - word
   * @param: 数据返回 6) 匹配 pdf - pdf
   * @param: 数据返回 7) 匹配 ppt - ppt
   * @param: 数据返回 8) 匹配 视频 - video
   * @param: 数据返回 9) 匹配 音频 - radio
   * @param: 数据返回 10) 其他匹配项 - other
   * @author: ljw
   **/
  export function fileSuffixTypeUtil(fileName){
      // 后缀获取
      var suffix = "";
      // 获取类型结果
      var result = "";
      try {
          var flieArr = fileName.split(".");
          suffix = flieArr[flieArr.length - 1];
      } catch (err) {
          suffix = "";
      }
      // fileName无后缀返回 false
      if (!suffix) {
          result = false;
          return result;
      }
      // 图片格式
      var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
      // 进行图片匹配
      result = imglist.some(function (item) {
          return item == suffix;
      });
      if (result) {
          result = "image";
          return result;
      }
      // 匹配txt
      var txtlist = ["txt"];
      result = txtlist.some(function (item) {
          return item == suffix;
      });
      if (result) {
          result = "txt";
          return result;
      }
      // 匹配 excel
      var excelist = ["xls", "xlsx"];
      result = excelist.some(function (item) {
          return item == suffix;
      });
      if (result) {
          result = "excel";
          return result;
      }
      // 匹配 word
      var wordlist = ["doc", "docx"];
      result = wordlist.some(function (item) {
          return item == suffix;
      });
      if (result) {
          result = "word";
          return result;
      }
      // 匹配 pdf
      var pdflist = ["pdf"];
      result = pdflist.some(function (item) {
          return item == suffix;
      });
      if (result) {
          result = "pdf";
          return result;
      }
      // 匹配 ppt
      var pptlist = ["ppt"];
      result = pptlist.some(function (item) {
          return item == suffix;
      });
      if (result) {
          result = "ppt";
          return result;
      }
      // 匹配 视频
      var videolist = ["mp4", "m2v", "mkv","ogg", "flv", "avi", "wmv", "rmvb"];
      result = videolist.some(function (item) {
          return item == suffix;
      });
      if (result) {
          result = "video";
          return result;
      }
      // 匹配 音频
      var radiolist = ["mp3", "wav", "wmv"];
      result = radiolist.some(function (item) {
          return item == suffix;
      });
      if (result) {
          result = "radio";
          return result;
      }
      // 其他 文件类型
      result = "other";
      return result;
  };
  

  4.upload.js（请求后端方法）

  import request from '@/utils/request'
  //上传信息
  export function uploadScreenshot(data){
      return request({
          url:'upload/multipart/uploadScreenshot',
          method:'post',
          data
      })
  }
  //上传信息
  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
      })
  };
  

  5.request.js

  import axios from 'axios'
  import router from "@/router";
  import ElementUI from "element-ui";
  const request = axios.create({
      baseURL: `http://localhost:9090`,
      timeout: 30000
  })
  // request 拦截器
  // 可以自请求发送前对请求做一些处理
  // 比如统一加token，对请求参数统一加密
  request.interceptors.request.use(config => {
      config.headers['Content-Type'] = 'application/json;charset=utf-8';
      return config
  }, error => {
      return Promise.reject(error)
  });
  // response 拦截器
  // 可以在接口响应后统一处理结果
  request.interceptors.response.use(
      response => {
          let res = response.data;
          // 如果是返回的文件
          if (response.headers === 'blob') {
              return res
          }
          // 兼容服务端返回的字符串数据
          if (typeof res === 'string') {
              res = res ? JSON.parse(res) : res
              console.log(res)
          }
         
          return res;
      },
      error => {
          console.log('err' + error) // for debug
          return Promise.reject(error)
      }
  )
  export default request
  

  三、后端实现

  1.数据库

  

  /*
   Navicat Premium Data Transfer
   Source Server         : local
   Source Server Type    : MySQL
   Source Server Version : 80028
   Source Host           : localhost:3306
   Source Schema         : shiro_jwt_vue_file
   Target Server Type    : MySQL
   Target Server Version : 80028
   File Encoding         : 65001
   Date: 01/05/2023 13:52:06
  */
  SET NAMES utf8mb4;
  SET FOREIGN_KEY_CHECKS = 0;
  -- ----------------------------
  -- Table structure for files
  -- ----------------------------
  DROP TABLE IF EXISTS `files`;
  CREATE TABLE `files`  (
    `id` int(0) NOT NULL AUTO_INCREMENT COMMENT 'id',
    `upload_id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '分片上传uploadId',
    `file_md5` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '文件md5',
    `url` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '下载链接',
    `file_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '文件名称',
    `bucket_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '桶名',
    `file_type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '文件类型',
    `file_size` bigint(0) NULL DEFAULT NULL COMMENT '文件大小(byte)',
    `chunk_size` bigint(0) NULL DEFAULT NULL COMMENT '每个分片的大小（byte）',
    `chunk_num` int(0) NULL DEFAULT NULL COMMENT '分片数量',
    `is_delete` tinyint(1) NULL DEFAULT 0 COMMENT '是否删除',
    `enable` tinyint(1) NULL DEFAULT 1 COMMENT '是否禁用链接',
    `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
    `update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
    PRIMARY KEY (`id`) USING BTREE
  ) ENGINE = InnoDB AUTO_INCREMENT = 262 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Dynamic;
  SET FOREIGN_KEY_CHECKS = 1;
  

  2.依赖pom.xml

  
          
              org.springframework.boot
              spring-boot-starter-web
          
          
              org.projectlombok
              lombok
              true
          
          
              com.alibaba
              fastjson
              1.2.50
          
          
              com.baomidou
              mybatis-plus-boot-starter
              3.5.2
          
          
              mysql
              mysql-connector-java
              8.0.30
          
          
              io.minio
              minio
              8.3.1
          
          
              com.squareup.okhttp3
              okhttp
              4.9.2
          
          
              org.springframework.boot
              spring-boot-starter-data-redis
          
          
              cn.hutool
              hutool-all
              5.7.20
          
          
          
              org.springframework.boot
              spring-boot-starter-validation
              
          
          
              org.apache.commons
              commons-lang3
          
          
              org.springframework.boot
              spring-boot-starter-test
              test
          
      
      
          
              
                  org.springframework.boot
                  spring-boot-dependencies
                  ${spring-boot.version}
                  pom
                  import
              
          

  3.application.yml

  server:
    port: 9090
  spring:
    datasource:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/shiro_jwt_vue_file?serverTimezone=Asia/Shanghai&userUnicode=true&useSSL=false
      username: root
      password: mysql
    redis:
      # Redis服务器地址
      host: 127.0.0.1
      # Redis服务器端口号
      port: 6379
      # 使用的数据库索引，默认是0
      database: 0
      # 连接超时时间
      timeout: 1800000
      # 设置密码
      #password: "123456"
      lettuce:
        pool:
          # 最大阻塞等待时间，负数表示没有限制
          max-wait: -1
          # 连接池中的最大空闲连接
          max-idle: 5
          # 连接池中的最小空闲连接
          min-idle: 0
          # 连接池中最大连接数，负数表示没有限制
          max-active: 20
    jackson:
      date-format: yyyy-MM-dd HH:mm:ss
      time-zone: GMT+8
  mybatis-plus:
    mapper-locations: classpath:mapper/*.xml
    configuration:
      log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  minio:
    endpoint: http://localhost:9000
    accesskey: minioadmin
    secretkey: minioadmin
    expiry: 1  #分片对象过期时间 单位（天）
    breakpoint-time: 1 #断点续传有效时间，在redis存储任务的时间 单位（天）

  4.controller文件上传

  package com.wusuowei.miniouploadfile.controller;
  import com.wusuowei.miniouploadfile.model.vo.FileUploadInfo;
  import com.wusuowei.miniouploadfile.service.UploadService;
  import com.wusuowei.miniouploadfile.utils.MinioUtils;
  import com.wusuowei.miniouploadfile.utils.R;
  import com.wusuowei.miniouploadfile.utils.RedisUtil;
  import com.wusuowei.miniouploadfile.utils.RespEnum;
  import lombok.extern.slf4j.Slf4j;
  import org.apache.commons.lang3.StringUtils;
  import org.springframework.web.bind.annotation.*;
  import org.springframework.web.multipart.MultipartFile;
  import javax.annotation.Resource;
  /**
   * minio上传流程
   *
   * 1.检查数据库中是否存在上传文件
   *
   * 2.根据文件信息初始化，获取分片预签名url地址，前端根据url地址上传文件
   *
   * 3.上传完成后，将分片上传的文件进行合并
   *
   * 4.保存文件信息到数据库
   */
  @RestController
  @Slf4j
  @RequestMapping("upload")
  public class FileMinioController {
      @Resource
      private UploadService uploadService;
      @Resource
      private RedisUtil redisUtil;
      @Resource
      private MinioUtils minioUtils;
      /**
       * @description 获取上传文件
       * @param fileMD5 文件md5
       * @return {@link R }
       * @author LGY
       * @date 2023/04/26 16:00
       */
      @GetMapping("/getUploadingFile/{fileMD5}")
      public R getUploadingFile(@PathVariable String fileMD5) {
          if (StringUtils.isBlank(fileMD5)) {
              return R.error();
          }
          FileUploadInfo fileUploadInfo = (FileUploadInfo) redisUtil.get(fileMD5);
          if (fileUploadInfo != null) {
              // 查询上传后的分片数据
              fileUploadInfo.setChunkUploadedList(minioUtils.getChunkByFileMD5(fileUploadInfo.getFileName(), fileUploadInfo.getUploadId(), fileUploadInfo.getFileType()));
              return R.ok().setData(fileUploadInfo);
          }
          return R.error();
      }
      /**
       * 校验文件是否存在
       *
       * @param md5 String
       * @return ResponseResult