springboot整合前端实现断点续传、大文件秒传以及多线程上传下载
  9m65el8SCpbP 2023年11月30日 25 0

前端，百度开源框架 webuploader
新建upload.html

webuploader官网地址： http://fex.baidu.com/webuploader/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webuploader</title>
</head>
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader.css">
<script src="jquery-1.11.1.js"></script>
<script src="webuploader.js"></script>
<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>
<button id="picker" style="display: none;">点击上传文件</button>
</body><script>
    $('#upload-container').click(function(event) {
        $("#picker").find('input').click();
    });
    var uploader = WebUploader.create({
        auto: true,// 选完文件后，是否自动上传。
        swf: 'Uploader.swf',// swf文件路径
        server: 'http://localhost:8080/upload',// 文件接收服务端。
        dnd: '#upload-container',
        pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        multiple: true, // 选择多个
        chunked: true,// 开启分片上传。
        threads: 20, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        fileSizeLimit: 1024*1024*1024*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal:'upload' // [默认值：'file'] 设置文件上传域的name。
    });    uploader.on("beforeFileQueued", function(file) {
        console.log(file); // 获取文件的后缀
    });    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.md5File( file )//大文件秒传        // 及时显示进度
            .progress(function(percentage) {
                console.log('Percentage:', percentage);
            })            // 完成
            .then(function(val) {
                console.log('md5 result:', val);
            });
    });    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>

后端，springboot框架，Apache httpclient文件上传组件 fileupload
#不启用对文件上传的支持。
spring:
servlet:
multipart:
enabled: false

pom.xml引入依赖

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <version>2.3.1.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-autoconfigure</artifactId>
        <version>2.3.1.RELEASE</version>
    </dependency>    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.1</version>
    </dependency>
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>    <dependency>
        <groupId>org.apache.httpcomponents</groupId>
        <artifactId>httpcore</artifactId>
        <version>4.4.10</version>
    </dependency>    <dependency>
        <groupId>org.apache.httpcomponents</groupId>
        <artifactId>httpclient</artifactId>
        <version>4.5.6</version>
    </dependency>
</dependencies>文件上传UploadController
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.List;@Controller
public class UploadController {    private final static String utf8 ="utf-8";
    @RequestMapping("/upload")
    @ResponseBody
    public void upload(HttpServletRequest request, HttpServletResponse response) throws Exception {        //分片
        response.setCharacterEncoding(utf8);
        Integer schunk = null; //分片
        Integer schunks = null; //总分片
        String name = null;
        String uploadPath = "F:\\fileItem";
        BufferedOutputStream os = null;
        try{
            DiskFileItemFactory factory = new DiskFileItemFactory();
            factory.setSizeThreshold(1024);
            factory.setRepository(new File(uploadPath));
            ServletFileUpload upload = new ServletFileUpload(factory);
            upload.setFileSizeMax(5l *1024l *1024l*1024l);//设置每个文件大小
            upload.setSizeMax(10l *1024l *1024l*1024l);//设置总大小
            List<FileItem> items = upload.parseRequest(request);            for(FileItem item : items){
                if(item.isFormField()){
                    if("chunk".equals(item.getFieldName())){
                        schunk = Integer.parseInt(item.getString(utf8));
                    }
                    if("chunks".equals(item.getFieldName())){
                        schunks = Integer.parseInt(item.getString(utf8));
                    }
                    if("name".equals(item.getFieldName())){
                        name = item.getString(utf8);
                    }
                }
            }
            for(FileItem item : items){
                if(!item.isFormField()){
                    String temFileName = name;
                    if(name != null){
                        if(schunk != null){
                            temFileName = schunk +"_"+name;
                        }
                        File temFile = new File(uploadPath,temFileName);
                        if(!temFile.exists()){//断点续传
                            item.write(temFile);
                        }
                    }
                }
            }
            //文件合并
            if(schunk != null && schunk.intValue() == schunks.intValue()-1){
                File tempFile = new File(uploadPath,name);
                os = new BufferedOutputStream(new FileOutputStream(tempFile));                for(int i=0 ;i<schunks;i++){
                    File file = new File(uploadPath,i+"_"+name);
                    while(!file.exists()){
                        Thread.sleep(100);
                    }
                    byte[] bytes = FileUtils.readFileToByteArray(file);
                    os.write(bytes);
                    os.flush();
                    file.delete();
                }
                os.flush();
            }
            response.getWriter().write("上传成功"+name);
        }finally {
            try{
                if(os != null){
                    os.close();
                }
            }catch (IOException e){
                e.printStackTrace();
            }
        }
    }
}

文件下载DownLoadController，后端java实现分片合并

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLEncoder;@Controller
public class DownLoadController {
    private final static String utf8 ="utf-8";
    @RequestMapping("/download")
    public void downLoadFile(HttpServletRequest request, HttpServletResponse response) throws Exception {
        File file = new File("/dot/file/视频文件.mp4");
        response.setCharacterEncoding(utf8);
        InputStream is = null;
        OutputStream os = null;
        try{
            //分片下载   http  Range bytes=100-1000   bytes=100-
            long fSize = file.length();
            response.setContentType("application/x-download");
            String fileName = URLEncoder.encode(file.getName(),utf8);
            response.addHeader("Content-Disposition","attachment;filename=" + fileName);
            response.setHeader("Accept-Range","bytes");            response.setHeader("fSize",String.valueOf(fSize));
            response.setHeader("fName",fileName);            long pos = 0,last = fSize-1,sum = 0;
            if(null != request.getHeader("Range")){
                response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);                String numRange = request.getHeader("Range").replaceAll("bytes=","");
                String[] strRange = numRange.split("-");
                if(strRange.length == 2){
                    pos = Long.parseLong(strRange[0].trim());
                    last = Long.parseLong(strRange[1].trim());
                    if(last > fSize-1){
                        last = fSize-1;
                    }
                }else{
                    pos = Long.parseLong(numRange.replaceAll("-","").trim());
                }
            }
            long rangeLenght = last - pos +1;
            String contentRange = new StringBuffer("bytes ").append(pos).append("-").append(last).append("/").append(fSize).toString();
            response.setHeader("Content-Range",contentRange);
            response.setHeader("Content-Lenght",String.valueOf(rangeLenght));            os = new BufferedOutputStream(response.getOutputStream());
            is = new BufferedInputStream(new FileInputStream(file));
            is.skip(pos);
            byte[] buffer = new byte[1024];
            int lenght = 0;
            while(sum < rangeLenght){
                lenght = is.read(buffer,0,((rangeLenght-sum) <= buffer.length ? ((int)(rangeLenght-sum)) :  buffer.length));
                sum = sum+ lenght;
                os.write(buffer,0,lenght);
            }
            System.out.println("下载完成");
        }finally {
            if(is != null){
                is.close();
            }
            if(os != null){
                os.close();
            }
        }
    }
}

文件下载DownloadClient，前端/浏览器端实现分片合并

import org.apache.commons.io.FileUtils;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.HttpClients;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.*;
import java.net.URLDecoder;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;@RestController
public class DownloadClient {    private final static long PER_PAGE = 1024l *1024l * 50l;
    private final static String DOWNPATH = "dot/file/fileItem";
    ExecutorService pool = Executors.newFixedThreadPool(10); //多线程，线程池下载文件    @RequestMapping("/downloadFile")
    public String downloadFile() throws Exception {
        FileInfo fileInfo = download( 0, 10, -1, null);
        //总分片数量
        long pages = fileInfo.fSize / PER_PAGE;
        for(long i=0;i<=pages; i++){
            pool.submit(new Download(i*PER_PAGE,(i+1)*PER_PAGE-1,i,fileInfo.fName));
        }        return "success";
    }    class FileInfo{
        long fSize;
        String fName;        public FileInfo(long fSize, String fName) {
            this.fSize = fSize;
            this.fName = fName;
        }
    }
    class Download implements Runnable{
        long start;
        long end;
        long page;
        String fName;        public Download(long start, long end, long page, String fName) {
            this.start = start;
            this.end = end;
            this.page = page;
            this.fName = fName;
        }        public void run() {
            try {
                FileInfo info = download( start, end, page, fName);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    private FileInfo download(long start,long end,long page,String fName) throws Exception {
        File file = new File(DOWNPATH,page+"-"+fName);
        if(file.exists()){
            return null;
        }
        HttpClient client = HttpClients.createDefault();
        HttpGet httpGet = new HttpGet("http://127.0.0.1:8080/download");
        httpGet.setHeader("Range","bytes="+start+"-"+end);        HttpResponse response = client.execute(httpGet);
        HttpEntity entity = response.getEntity();
        InputStream is = entity.getContent();        String fSize = response.getFirstHeader("fSize").getValue();
        fName = URLDecoder.decode(response.getFirstHeader("fName").getValue(),"utf-8");        FileOutputStream fis = new FileOutputStream(file);
        byte[] buffer = new byte[1024];
        int ch =0;
        while((ch = is.read(buffer)) != -1){
            fis.write(buffer,0,ch);
        }
        is.close();
        fis.flush();
        fis.close();        if(end - Long.valueOf(fSize) >= 0){//最后一个分片
            mergeFile(fName,page);
        }
        return new FileInfo(Long.valueOf(fSize),fName);
    }    private void mergeFile(String fName, long page) throws Exception {
        File tempFile = new File(DOWNPATH,fName);
        BufferedOutputStream os = new BufferedOutputStream(new FileOutputStream(tempFile));        for(int i=0 ;i<=page;i++){
            File file = new File(DOWNPATH,i+"-"+fName);
            while(!file.exists() || (i != page && file.length() < PER_PAGE)){
                Thread.sleep(100);
            }
            byte[] bytes = FileUtils.readFileToByteArray(file);
            os.write(bytes);
            os.flush();
            file.delete();
        }
        File file = new File(DOWNPATH,-1+"-null");
        file.delete();
        os.flush();
        os.close();
        //文件子节计算导致文件不完整
        //流未关闭
    }
}

 

参考文章：http://blog.ncmem.com/wordpress/2023/11/16/springboot整合前端实现断点续传、大文件秒传以及多线程/



 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载，内容版权归原作者所有。本网站的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@moduyun.com
  1. 分享：
最后一次编辑于 2023年11月30日 0

暂无评论

推荐阅读
  ejdQbmcNduLw   2023年12月23日   169   0   0 Java开发语言业务逻辑java数据库数据库开发语言业务逻辑
  ejdQbmcNduLw   2023年12月23日   119   0   0 JavaListList持久化javaspring boot数据库数据库spring boot持久化
  HWwT5ZSESN5o   2023年12月23日   27   0   0 JavaJSONservletHTTPHTTPservletjsonidejavaide
  ejdQbmcNduLw   2023年12月23日   37   0   0 Java字段字段开发语言javaCodeCode开发语言
  ex5LI5WiFC1S   2023年12月23日   49   0   0 Java冒泡排序c++算法java数组数组冒泡排序c++算法
  ejdQbmcNduLw   2023年12月23日   28   0   0 分布式系统springhystrix断路器spring cloudspring cloud断路器springhystrix分布式系统
  MxWiQzrJEqjh   2023年12月23日   28   0   0 Javac++字符串c++开发语言字符串开发语言变长参数变长参数java
  ejdQbmcNduLw   2023年12月23日   72   0   0 JavaCoreCore辅助工具jvmc++javajvm辅助工具c++
  9BvoR1irARnU   2023年12月23日   104   0   0 JavaHTTP线程池jsonjavaspring bootspring boot线程池HTTPjson
  5CcNB1PYyM7Y   2023年12月23日   74   0   0 服务器Java示例代码示例代码python推送python服务器java推送
  n3y4rZ8GUfmO   2023年12月23日   67   0   0 服务器Javajava限流服务器限流redisRedis
  ejdQbmcNduLw   2023年12月23日   41   0   0 CloudCloudspring cloudspring cloudspringspring配置文件配置文件eurekaeureka
  gxJ4jYVTC9IN   2023年12月23日   28   0   0 springrocketmqrocketmq推送负载均衡spring推送负载均衡
  NrKhGdPqPgIO   2023年12月23日   62   0   0 redis线程安全数据库数据库安全安全springspring线程安全redis
9m65el8SCpbP
9m65el8SCpbP
作者其他文章 更多
java文件的上传与下载

2023-12-19

JavaWeb文件上传和下载

2023-12-19

SpringBoot+Vue实现大文件分块上传

2023-12-19

vue如何实现文件上传及预览

2023-12-19

Vue—实现文件上传（多文件），图片上传

2023-12-19

.Net文件上传和下载

2023-12-12

vue实现大文件分片上传 vue-simple-uploader

2023-12-12

C#实现文件上传下载

2023-12-12

ASP.NET Web API实现简单的文件下载与上传

2023-12-12

c# 文件上传与下载

2023-12-12

最新推荐 更多
终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的

2024-05-20

博客园美化：增加顶部炫彩loading进度条

2024-05-20

lodash已死？radash库方法介绍及源码解析 —— 函数柯里化 + Number篇

2024-05-20

TypeScript入门介绍

2024-05-20

XML Schema 复杂元素类型详解：定义及示例解析

2024-05-20

什么是单点登录？如何实现？

2024-05-20

基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

2024-05-18

解释下什么是事件代理？应用场景？

2024-05-18

Vue项目中有封装过axios吗？主要是封装哪方面的？

2024-05-17

浅谈Vue.js与原生开发

2024-05-17

vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

2024-05-17

Vue模板语法、属性绑定、条件渲染的学习

2024-05-17

vue3编译优化之“静态提升”

2024-05-17

VUE-局部使用

2024-05-17

你是怎么处理vue项目中的错误的？

2024-05-17

实现抖音 “视频无限滑动“效果

2024-05-17

说说webpack proxy工作原理？为什么能解决跨域?

2024-05-17

我为什么还要造一个前端轮子？

2024-05-17

一款摸鱼神器！帮助你利用上班时间背单词！

2024-05-17

next-route

2024-05-17

常用标签
数据数据数据数据javalinuxlinuxpythonCentOSredisJavapython区块链技术区块链信息系统字符串MySQL资讯项目管理mysql教程MySQL