【Java】 Springboot+Vue 大文件断点续传

同事在重构老系统的项目时用到了这种大文件上传

第一篇文章是简书的这个：

https://www.jianshu.com/p/b59d7dee15a6

是夏大佬写的vue-uploader组件：

https://www.cnblogs.com/xiahj/p/15950975.html

然后晚上看完才发现，没有后台接口...

然后我找了下网上的资料也不多，然后参考的是这位来实现：

https://github.com/LuoLiangDSGA/spring-learning/tree/bc60e349b4c573fb624230d068f7bb66a9e64736/boot-uploader

我的Springboot接口实现：

1、Chuck分块对象实体：

package cn.cloud9.server.struct.file.dto;

import com.alibaba.fastjson.annotation.JSONField;

import com.baomidou.mybatisplus.annotation.TableField;

import com.baomidou.mybatisplus.annotation.TableName;

import lombok.Data;

import lombok.EqualsAndHashCode;

import org.springframework.data.annotation.Transient;

import org.springframework.web.multipart.MultipartFile;

import java.io.Serializable;

/**

 * @author OnCloud9

 * @description

 * @project tt-server

 * @date 2022年11月18日 下午 11:02

 */

@Data

@EqualsAndHashCode(callSuper = true)

@TableName("chuck")

public class Chuck extends ChuckFile implements Serializable {

    /**

     * 当前文件块，从1开始

     */

    @TableField("CHUNK_NUMBER")

    private Integer chunkNumber;

    /**

     * 分块大小

     */

    @TableField("CHUNK_SIZE")

    private Long chunkSize;

    /**

     * 当前分块大小

     */

    @TableField("CURRENT_CHUNK_SIZE")

    private Long currentChunkSize;

    /**

     * 相对路径

     */

    @TableField("RELATIVE_PATH")

    private String relativePath;

    /**

     * 总块数

     */

    @TableField("TOTAL_CHUNKS")

    private Integer totalChunks;

    /**

     * form表单的file对象，为了不让Fastjson序列化，注解设置false

     */

    @Transient

    @JSONField(serialize = false)

    @TableField(exist = false)

    private MultipartFile file;

}

2、分块文件实体：

package cn.cloud9.server.struct.file.dto;

import com.baomidou.mybatisplus.annotation.IdType;

import com.baomidou.mybatisplus.annotation.TableField;

import com.baomidou.mybatisplus.annotation.TableId;

import com.baomidou.mybatisplus.annotation.TableName;

import lombok.Data;

import org.springframework.data.annotation.Id;

import java.io.Serializable;

/**

 * @author OnCloud9

 * @description

 * @project tt-server

 * @date 2022年11月18日 下午 11:00

 */

@Data

@TableName("chuck_file")

public class ChuckFile implements Serializable {

    @TableId(value = "ID", type = IdType.AUTO)

    protected Long id;

    @TableField("FILENAME")

    protected String filename;

    @TableField("IDENTIFIER")

    protected String identifier;

    @TableField("TOTAL_SIZE")

    protected Long totalSize;

    @TableField("TYPE")

    protected String type;

    @TableField("LOCATION")

    protected String location;

}

3、保存分块信息，判断分块是否上传了

package cn.cloud9.server.struct.file.service.impl;

import cn.cloud9.server.struct.file.dto.Chuck;

import cn.cloud9.server.struct.file.mapper.ChuckMapper;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;

import lombok.extern.slf4j.Slf4j;

import org.apache.commons.collections.CollectionUtils;

import org.springframework.stereotype.Service;

import org.springframework.transaction.annotation.Propagation;

import org.springframework.transaction.annotation.Transactional;

import java.util.List;

/**

 * @author OnCloud9

 * @description

 * @project tt-server

 * @date 2022年11月18日 下午 11:08

 */

@Slf4j

@Service

public class ChuckService extends ServiceImpl<ChuckMapper, Chuck> {

    /**

     * 保存分块信息

     * @param chuck

     */

    @Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)

    public Chuck saveChuck(Chuck chuck) {

        final int insert = baseMapper.insert(chuck);

        return 1 == insert ? chuck : null;

    }

    /**

     * 判断该分块是否上传过

     * @param chuck

     * @return

     */

    public boolean checkHasChucked(Chuck chuck) {

        final List<Chuck> chucks = lambdaQuery()

                .eq(Chuck::getIdentifier, chuck.getIdentifier())

                .eq(Chuck::getChunkNumber, chuck.getChunkNumber())

                .list();

        return CollectionUtils.isNotEmpty(chucks);

    }

}

4、分块文件服务Bean就两个作用：合并分块，写入合并后的文件信息：

这里原封不动照抄作者的逻辑，就是排序作者写错了用倒序，害我检查半天哪没写对，文件一直合成是坏的

package cn.cloud9.server.struct.file.service.impl;

import cn.cloud9.server.struct.file.dto.ChuckFile;

import cn.cloud9.server.struct.file.mapper.ChuckFileMapper;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;

import lombok.extern.slf4j.Slf4j;

import org.springframework.stereotype.Service;

import java.io.File;

import java.io.IOException;

import java.nio.file.Files;

import java.nio.file.Paths;

import java.nio.file.StandardOpenOption;

/**

 * @author OnCloud9

 * @description

 * @project tt-server

 * @date 2022年11月18日 下午 11:08

 */

@Slf4j

@Service

public class ChuckFileService extends ServiceImpl<ChuckFileMapper, ChuckFile> {

    public void mergeChuckFile(String storagePath, ChuckFile chuckFile) {

        try {

            final String finalFile = storagePath + File.separator + chuckFile.getFilename();

            Files.createFile(Paths.get(finalFile));

            Files.list(Paths.get(storagePath))

                    /* 1、过滤非合并文件 */

                    .filter(path -> path.getFileName().toString().contains("-"))

                    /* 2、升序排序 0 - 1 - 2 。。。 */

                    .sorted((o1, o2) -> {

                        String p1 = o1.getFileName().toString();

                        String p2 = o2.getFileName().toString();

                        int i1 = p1.lastIndexOf("-") + 1;

                        int i2 = p2.lastIndexOf("-") + 1;

                        return Integer.valueOf(p1.substring(i1)).compareTo(Integer.valueOf(p2.substring(i2)));

                    })

                    /* 3、合并文件 */

                    .forEach(path -> {

                        try {

                            /* 以追加的形式写入文件 */

                            Files.write(Paths.get(finalFile), Files.readAllBytes(path), StandardOpenOption.APPEND);

                            /* 合并后删除该块 */

                            Files.delete(path);

                        } catch (IOException e) {

                            e.printStackTrace();

                        }

                    });

        } catch (Exception e) {

            log.error("{}合并写入异常：{}", chuckFile.getFilename(), e.getMessage());

        }

    }

    public void addChuckFile(ChuckFile chuckFile) {

        baseMapper.insert(chuckFile);

    }

}

5、Controller的三个接口

这里Chuck接口的逻辑就没封装到服务了

package cn.cloud9.server.struct.file.controller;

import cn.cloud9.server.struct.controller.BaseController;

import cn.cloud9.server.struct.file.FileProperty;

import cn.cloud9.server.struct.file.FileUtil;

import cn.cloud9.server.struct.file.dto.Chuck;

import cn.cloud9.server.struct.file.dto.ChuckFile;

import cn.cloud9.server.struct.file.service.impl.ChuckFileService;

import cn.cloud9.server.struct.file.service.impl.ChuckService;

import lombok.extern.slf4j.Slf4j;

import org.springframework.http.MediaType;

import org.springframework.web.bind.annotation.*;

import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;

import javax.servlet.http.HttpServletResponse;

import java.io.File;

/**

 * @author OnCloud9

 * @description 大型文件上传

 * @project tt-server

 * @date 2022年11月18日 下午 10:58

 */

@Slf4j

@RestController

@RequestMapping("/chuck-file")

public class ChuckFileController extends BaseController {

    private static final String CHUCK_DIR = "chuck";

    @Resource

    private FileProperty fileProperty;

    @Resource

    private ChuckFileService chuckFileService;

    @Resource

    private ChuckService chuckService;

    /**

     * 上传分块文件

     * @param chuck 分块文件

     * @return 响应结果

     */

    @PostMapping(value = "/chuck", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)

    public Object uploadFileChuck(@ModelAttribute Chuck chuck) {

        final MultipartFile mf = chuck.getFile();

        log.info("收到文件块 文件块名：{} 块编号：{}", mf.getOriginalFilename(), chuck.getChunkNumber());

        try {

            /* 1、准备存储位置  根目录 + 分块目录 + 无类型文件名的目录  */

            final String pureName = FileUtil.getFileNameWithoutTypeSuffix(mf.getOriginalFilename());

            String storagePath = fileProperty.getBaseDirectory() + File.separator + CHUCK_DIR + File.separator + pureName;

            final File storePath = new File(storagePath);

            if (!storePath.exists()) storePath.mkdirs();

            /* 2、准备分块文件的规范名称 [无类型文件名 -分块号] */

            String chuckFilename = pureName + "-" + chuck.getChunkNumber();

            /* 3、向存储位置写入文件 */

            final File targetFile = new File(storePath, chuckFilename);

            mf.transferTo(targetFile);

            log.debug("文件 {} 写入成功, uuid:{}", chuck.getFilename(), chuck.getIdentifier());

            chuck = chuckService.saveChuck(chuck);

        } catch (Exception e) {

            log.error("文件上传异常：{}, {}", chuck.getFilename(), e.getMessage());

            return e.getMessage();

        }

        return chuck;

    }

    /**

     * 检查该分块文件是否上传了

     * @param chuck 分块文件

     * @return 304 | 分块文件 has-chucked

     */

    @GetMapping("/chuck")

    public Object checkHasChucked(@ModelAttribute Chuck chuck) {

        final boolean hasChucked = chuckService.checkHasChucked(chuck);

        if (hasChucked) response.setStatus(HttpServletResponse.SC_NOT_MODIFIED);

        return chuck;

    }

    /**

     * 文件合并

     * @param chuckFile 分块文件合并信息

     */

    @PostMapping("/merge")

    public void mergeChuckFile(@ModelAttribute ChuckFile chuckFile) {

        /* 获取存储位置 */

        final String pureName = FileUtil.getFileNameWithoutTypeSuffix(chuckFile.getFilename());

        String storagePath = fileProperty.getBaseDirectory() + File.separator + CHUCK_DIR + File.separator + pureName;

        chuckFileService.mergeChuckFile(storagePath, chuckFile);

        chuckFile.setLocation(storagePath);

        chuckFileService.addChuckFile(chuckFile);

    }

}

6、根目录的配置bean:

package cn.cloud9.server.struct.file;

import lombok.Data;

import org.springframework.boot.autoconfigure.ImportAutoConfiguration;

import org.springframework.boot.context.properties.ConfigurationProperties;

import org.springframework.context.annotation.Configuration;

/**

 * @author OnCloud9

 * @description

 * @project tt-server

 * @date 2022年11月15日 下午 11:34

 */

@Data

@Configuration

@ConfigurationProperties(prefix = "file")

public class FileProperty {

    /* 文件基础目录位置 */

    private String baseDirectory;

}

配置文件写法：

file:

  base-directory: F:\\tt-file

文件工具类代码：

package cn.cloud9.server.struct.file;

import lombok.SneakyThrows;

import lombok.extern.slf4j.Slf4j;

import org.apache.commons.lang3.StringUtils;

import org.apache.tika.Tika;

import sun.misc.BASE64Encoder;

import javax.servlet.http.HttpServletResponse;

import java.io.File;

import java.net.URLEncoder;

import java.nio.charset.StandardCharsets;

import java.time.LocalDateTime;

import java.time.Month;

/**

 * @author OnCloud9

 * @description

 * @project tt-server

 * @date 2022年11月15日 下午 11:27

 */

@Slf4j

public class FileUtil {

    /**

     * 根据当前年月创建目录

     * @return yyyy_mm

     */

    public static String createDirPathByYearMonth() {

        final LocalDateTime now = LocalDateTime.now();

        final int year = now.getYear();

        final Month month = now.getMonth();

        final int monthValue = month.getValue();

        return year + "_" + monthValue;

    }

    /**

     * 获取文件类型后缀

     * @param filename 文件名称

     * @return 文件类型

     */

    public static String getFileTypeSuffix(String filename) {

        final int pointIndex = filename.lastIndexOf(".");

        final String suffix = filename.substring(pointIndex + 1);

        return StringUtils.isBlank(suffix) ? "" : suffix;

    }

    /**

     * 获取不带类型后缀的文件名

     * @param filename 文件名称

     * @return 不带类型后缀的文件名

     */

    public static String getFileNameWithoutTypeSuffix(String filename) {

        final int pointIndex = filename.lastIndexOf(".");

        final String pureName = filename.substring(0, pointIndex);

        return StringUtils.isBlank(pureName) ? "" : pureName;

    }

    /**

     * 设置文件下载的响应信息

     * @param response 响应对象

     * @param file 文件

     * @param originFilename 源文件名

     */

    public static void setDownloadResponseInfo(HttpServletResponse response, File file, String originFilename) {

        try {

            response.setCharacterEncoding("UTF-8");

            /* 文件名 */

            final String fileName = StringUtils.isBlank(originFilename) ? file.getName() : originFilename;

            /* 获取要下载的文件类型， 设置文件类型声明 */

            String mimeType = new Tika().detect(file);

            response.setContentType(mimeType);

            /* 设置响应头，告诉该文件用于下载而非展示  attachment;filename 类型：附件，文件名称 */

            final String header = response.getHeader("User-Agent");

            if (StringUtils.isNotBlank(header) && header.contains("Firefox")){

                /* 对火狐浏览器单独设置 */

                response.setHeader("Content-Disposition","attachment;filename==?UTF-8?B?"+ new BASE64Encoder().encode(fileName.getBytes(StandardCharsets.UTF_8))+"?=");

            }

            else response.setHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode(fileName,"UTF-8"));

        } catch (Exception e) {

            log.info("设置响应信息异常：{}", e.getMessage());

        }

    }

}

获取MimeType类型需要这个Tika组件支持：

        <!-- https://mvnrepository.com/artifact/org.apache.tika/tika-core -->

        <dependency>

            <groupId>org.apache.tika</groupId>

            <artifactId>tika-core</artifactId>

            <version>2.6.0</version>

        </dependency>

Web接口组件：

直接克隆作者的项目

1、把接口改成你写的接口地址一个chuck 一个merge （chuck会被组件用Post和Get区分请求好像，post就传分块，get检查分块上传了没有）

<template>

  <uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-complete="fileComplete" @complete="complete"></uploader>

</template>

<script>

import axios from 'axios'

import qs from 'qs'

export default {

  data () {

    return {

      options: {

        target: 'http://localhost:8080/chuck-file/chuck', // '//jsonplaceholder.typicode.com/posts/',

        testChunks: false

      },

      attrs: {

        accept: 'image/*'

      },

      statusText: {

        success: '成功了',

        error: '出错了',

        uploading: '上传中',

        paused: '暂停中',

        waiting: '等待中'

      }

    }

  },

  methods: {

    complete () {

      console.log('complete', arguments)

    },

    fileComplete () {

      console.log('file complete', arguments)

      const file = arguments[0].file

      axios.post('http://localhost:8080/chuck-file/merge', qs.stringify({

        filename: file.name,

        identifier: arguments[0].uniqueIdentifier,

        totalSize: file.size,

        type: file.type

      })).then(function (response) {

        console.log(response)

      }).catch(function (error) {

        console.log(error)

      })

    }

  },

  mounted () {

    this.$nextTick(() => {

      window.uploader = this.$refs.uploader.uploader

    })

  }

}

</script>

<style>

  .uploader-example {

    width: 880px;

    padding: 15px;

    margin: 40px auto 0;

    font-size: 12px;

    box-shadow: 0 0 10px rgba(0, 0, 0, .4);

  }

  .uploader-example .uploader-btn {

    margin-right: 4px;

  }

  .uploader-example .uploader-list {

    max-height: 440px;

    overflow: auto;

    overflow-x: hidden;

    overflow-y: auto;

  }

</style>

2、区分后台的端口：

在config / index.js 里面重新配置web的端口：

8080 改成 8081

// see http://vuejs-templates.github.io/webpack for documentation.

var path = require('path')

module.exports = {

  build: {

    env: require('./prod.env'),

    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: '',

    assetsPublicPath: './',

    productionSourceMap: true,

    // Gzip off by default as many popular static hosts such as

    // Surge or Netlify already gzip all static assets for you.

    // Before setting to `true`, make sure to:

    // npm install --save-dev compression-webpack-plugin

    productionGzip: false,

    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to

    // View the bundle analyzer report after build finishes:

    // `npm run build --report`

    // Set to `true` or `false` to always turn it on or off

    bundleAnalyzerReport: process.env.npm_config_report

  },

  dev: {

    env: require('./dev.env'),

    port: 8081,

    autoOpenBrowser: true,

    assetsSubDirectory: '',

    assetsPublicPath: '/',

    proxyTable: {},

    // CSS Sourcemaps off by default because relative paths are "buggy"

    // with this option, according to the CSS-Loader README

    // (https://github.com/webpack/css-loader#sourcemaps)

    // In our experience, they generally work as expected,

    // just be aware of this issue when enabling this option.

    cssSourceMap: false

  }

}

这里可以看到就两个依赖：

  "dependencies": {

    "axios": "^1.1.3",

    "simple-uploader.js": "^0.5.6"

  },

分块文件表记录：

mysql> SELECT * FROM chuck_file;

+----+------------------------------------------+----------------------------------------------+------------+--------------------+--------------------------------------------------------+

| ID | FILENAME                                 | IDENTIFIER                                   | TOTAL_SIZE | TYPE               | LOCATION                                               |

+----+------------------------------------------+----------------------------------------------+------------+--------------------+--------------------------------------------------------+

|  1 | charles中文破解版.rar                    | 135963354-charlesrar                         |  135963354 |                    | F:\\tt-file\chuck\charles中文破解版                    |

|  2 | charles中文破解版.rar                    | 135963354-charlesrar                         |  135963354 |                    | F:\\tt-file\chuck\charles中文破解版                    |

|  3 | charles中文破解版.rar                    | 135963354-charlesrar                         |  135963354 |                    | F:\\tt-file\chuck\charles中文破解版                    |

|  4 | charles中文破解版.rar                    | 135963354-charlesrar                         |  135963354 |                    | F:\\tt-file\chuck\charles中文破解版                    |

|  5 | charles中文破解版.rar                    | 135963354-charlesrar                         |  135963354 |                    | F:\\tt-file\chuck\charles中文破解版                    |

|  6 | charles中文破解版.rar                    | 135963354-charlesrar                         |  135963354 |                    | F:\\tt-file\chuck\charles中文破解版                    |

|  7 | mysql-8.0.29-1.el8.x86_64.rpm-bundle.tar | 793722880-mysql-8029-1el8x86_64rpm-bundletar |  793722880 | application/x-tar  | F:\\tt-file\chuck\mysql-8.0.29-1.el8.x86_64.rpm-bundle |

|  8 | phoenix-hbase-2.4-5.1.2-bin.tar.gz       | 207440936-phoenix-hbase-24-512-bintargz      |  207440936 | application/x-gzip | F:\\tt-file\chuck\phoenix-hbase-2.4-5.1.2-bin.tar      |

+----+------------------------------------------+----------------------------------------------+------------+--------------------+--------------------------------------------------------+

8 rows in set (0.02 sec)

表结构：

CREATE TABLE `chuck_file` (

  `ID` int NOT NULL AUTO_INCREMENT,

  `FILENAME` varchar(128) COLLATE utf8mb4_general_ci DEFAULT NULL,

  `IDENTIFIER` varchar(128) COLLATE utf8mb4_general_ci DEFAULT NULL,

  `TOTAL_SIZE` bigint DEFAULT NULL,

  `TYPE` varchar(24) COLLATE utf8mb4_general_ci DEFAULT NULL,

  `LOCATION` varchar(128) COLLATE utf8mb4_general_ci DEFAULT NULL,

  PRIMARY KEY (`ID`)

) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

CREATE TABLE `chuck` (

  `ID` int NOT NULL AUTO_INCREMENT,

  `FILENAME` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,

  `IDENTIFIER` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,

  `TOTAL_SIZE` bigint DEFAULT NULL,

  `TYPE` varchar(24) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,

  `LOCATION` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,

  `CHUNK_NUMBER` int DEFAULT NULL,

  `CHUNK_SIZE` int DEFAULT NULL,

  `CURRENT_CHUNK_SIZE` int DEFAULT NULL,

  `RELATIVE_PATH` varchar(128) COLLATE utf8mb4_general_ci DEFAULT NULL,

  `TOTAL_CHUNKS` int DEFAULT NULL,

  PRIMARY KEY (`ID`)

) ENGINE=InnoDB AUTO_INCREMENT=1734 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

最后几点事项：

1、分块文件的命名规则最好是严谨点，影响合并操作，一般中文无特殊符号文件名不会有影响

2、不建议立即删除分块，可以先对合并后的文件进行校验，如果不存在或者大小不一致，可以继续拿分块重新合并