springboot实现分段上传功能的示例代码-Java开发

这篇文章主要介绍了springboot实现分段上传，包括文件上传下载，断点续传，增量上传功能，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

文件上传下载

断点续传，增量上传等

导入依赖

<!--jdk提供的关于文件上传-->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.10.0</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>
<!--apache提供了的文件上传-->
<dependency>
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpcore</artifactId>
    <version>4.4.14</version>
</dependency>
<dependency>
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpclient</artifactId>
    <version>4.5.13</version>
</dependency>

前端配置

前端使用的是webuploader

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webuploader</title>
</head>
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.css" rel="external nofollow" >
<style>
    #upload-container, #upload-list{width: 500px; margin: 0 auto; }
    #upload-container{cursor: pointer; border-radius: 15px; background: #EEEFFF; height: 200px;}
    #upload-list{height: 800px; border: 1px solid #EEE; border-radius: 5px; margin-top: 10px; padding: 10px 20px;}
    #upload-container>span{widows: 100%; text-align: center; color: gray; display: block; padding-top: 15%;}
    .upload-item{margin-top: 5px; padding-bottom: 5px; border-bottom: 1px dashed gray;}
    .percentage{height: 5px; background: green;}
    .btn-delete, .btn-retry{cursor: pointer; color: gray;}
    .btn-delete:hover{color: orange;}
    .btn-retry:hover{color: green;}
</style>
<!--引入JS-->
<body>
    <div id="upload-container">
        <span>点击或将文件拖拽至此上传</span>
    </div>
    <div id="upload-list">
        <!-- <div class="upload-item">
            <span>文件名：123</span>
            <span data-file_id="" class="btn-delete">删除</span>
            <span data-file_id="" class="btn-retry">重试</span>
            <div class="percentage"></div>
        </div> -->
    </div>
    <button id="picker" style="display: none;">点击上传文件</button>
</body>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script src="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.js"></script>
<script>
    $('#upload-container').click(function(event) {
        $("#picker").find('input').click();
    });
    var uploader = WebUploader.create({
        auto: true,// 选完文件后，是否自动上传。
        swf: 'https://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',// swf文件路径
        server: 'http://www.test.com/zyb.php',// 文件接收服务端。
        dnd: '#upload-container',
        pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        multiple: true, // 选择多个
        chunked: true,// 开起分片上传。
        threads: 5, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        fileSizeLimit: 1024*1024*100*100, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal:'upload', // [默认值：'file'] 设置文件上传域的name。
    });

    uploader.on('fileQueued', function(file) {
        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
        console.log(file.ext) // 获取文件的后缀
        console.log(file.size) // 获取文件的大小
        console.log(file.name);
        var html = '<div class="upload-item"><span>文件名：'+file.name+'</span><span data-file_id="'+file.id+'" class="btn-delete">删除</span><span data-file_id="'+file.id+'" class="btn-retry">重试</span><div class="percentage '+file.id+'" style="width: 0%;"></div></div>';
        $('#upload-list').append(html);
    });

    uploader.on('uploadProgress', function(file, percentage) {
        console.log(percentage * 100 + '%');
        var width = $('.upload-item').width();
        $('.'+file.id).width(width*percentage);
    });

    uploader.on('uploadSuccess', function(file, response) {
        console.log(file.id+"传输成功");
    });

    uploader.on('uploadError', function(file) {
        console.log(file);
        console.log(file.id+'upload error')
    });

    $('#upload-list').on('click', '.upload-item .btn-delete', function() {
        // 从文件队列中删除某个文件id
        file_id = $(this).data('file_id');
        // uploader.removeFile(file_id); // 标记文件状态为已取消
        uploader.removeFile(file_id, true); // 从queue中删除
        console.log(uploader.getFiles());
    });

    $('#upload-list').on('click', '.btn-retry', function() {
        uploader.retry($(this).data('file_id'));
    });

    uploader.on('uploadComplete', function(file) {
        console.log(uploader.getFiles());
    });
</script>
</html>

前端上传数据

#前台传输文件的表单信息
id: WU_FILE_1 文件ID
name: 录制_2021_03_19_08_52_06_801.mp4 #文件名
type: video/mp4 #类型
lastModifiedDate: Fri Mar 19 2021 08:52:22 GMT+0800 (中国标准时间)
size: 45711359 #大小
chunks: 9 #总分片数
chunk: 0  #当前分片的编号
upload: (binary)

断点续传[增量上传]

思路：前端会对文件进行分片并以此调用此接口，后台对文件进行保存。当判断文件时最后一个分片文件的时候对本地保存的文件进行组合。

@RequestMapping("/update")
public String update(HttpServletRequest request,MultipartFile files,
                     @RequestParam("chunks") Integer chunks,
                     @RequestParam("chunk") Integer chunk,
                     @RequestParam("name") String name){
    //根据原理，需要准备写的流os，写的位置locate，
    //分片临时位置tempLocate，当前分片数chunk[表单获取]，总分片数chunks[表单获取],
    //文件名称name[表单获取]，临时分片名称tempName
    String tempName = null, locate="E:\\file",tempLocate="E:\\file\\temp";
    BufferedOutputStream os = null;
    try {
        //----------------参数判断----------------
        if (name == null || chunk == null || chunks == null){
            log.error("参数未获取到");
            return "";
        }
        if (files == null){
            log.error("数据上传失败");
            return "";
        }
        //----------------断点续传----------------
        tempName = name+"_"+chunk;
        File assest = new File(tempLocate,tempName);
        //文件不存在再写，实现断点续传
        if (!assest.exists()){
            files.transferTo(assest);
        }
        //----------------合并数据----------------
        long curTime = System.currentTimeMillis();
        if (chunk == chunks-1){
            File file = new File(locate,name);
            os = new BufferedOutputStream(new FileOutputStream(file));

            for (int i = 0; i < chunks; i++) {
                File temp = new File(tempLocate,name+"_"+i);
                while (!temp.exists()){
                    //if (System.currentTimeMillis() - curTime > waitTime){
                    //    return "合并时过长，请重新上传文件";
                    /

springboot实现分段上传功能的示例代码

目录

文件上传下载

导入依赖

前端配置

前端上传数据

断点续传[增量上传]

基础教程推荐