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

最新推荐文章于 2024-07-06 10:33:02 发布

Ashe_wyq

最新推荐文章于 2024-07-06 10:33:02 发布

阅读量1k

点赞数

分类专栏： Java 后端大数据

本文链接：https://blog.csdn.net/wangyanqun2017/article/details/100600960

版权

Java 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

后端

5 篇文章 0 订阅

订阅专栏

大数据

3 篇文章 0 订阅

订阅专栏

前端部分

用百度的Webuploader（可做断点续传）实现文件分块上传

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="https://cdn.staticfile.org/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.10.2/jquery.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/webuploader/0.1.5/webuploader.min.js"></script>
</head>
<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>
</body>
<script type="text/javascript">
    var GUID = WebUploader.Base.guid();//一个GUID
    var uploader = WebUploader.create({
        // swf文件路径
        swf: 'http://cdn.staticfile.org/webuploader/0.1.5/Uploader.swf',
        // 文件接收服务端。
        server: './upload/upload',
        formData:{
            guid : GUID
        },
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        chunked : true, // 分片处理
        chunkSize : 32 * 1024 * 1024, // 每片32M,
        chunkRetry : false,// 如果失败，则不重试
        threads : 5,// 上传并发数。允许同时最大上传进程数。
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });
    $("#ctlBtn").click(function () {
        uploader.upload();
    });
    //当文件上传成功时触发。
    uploader.on( "uploadSuccess", function( file ) {
        $.post('./upload/merge', { guid: GUID, fileName: file.name }, function (data) {
            if(data.code == 200){
                alert('上传成功!');
            }
        });
    });
</script>
</html>

后端部分

POM.xml

SpringBoot + Apache Fileupload

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>upload2</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>upload2</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

application.properties

#文件上传路径
uploadFolder=D:/wyq/data/

#单个文件最大
multipart.maxFileSize=3000MB
#设置总上传数据总大小
multipart.maxRequestSize=10000MB

文件上传配置类

package com.example.upload2.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.servlet.MultipartConfigFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import javax.servlet.MultipartConfigElement;

@Configuration
public class FileConfig {
    @Bean
    public MultipartConfigElement multipartConfigElement(
        @Value("${multipart.maxFileSize}") String maxFileSize,
        @Value("${multipart.maxRequestSize}") String maxRequestSize) {
        MultipartConfigFactory factory = new MultipartConfigFactory();
        // 单个文件最大
        factory.setMaxFileSize(maxFileSize);
        // 设置总上传数据总大小
        factory.setMaxRequestSize(maxRequestSize);
        return factory.createMultipartConfig();
    }

}

返回给前端的json数据

package com.example.upload2.config;

public class JsonResult<T> {

    private String code;
    private String msg;
    private T data;

    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public T getData() {
        return data;
    }
    public void setData(T data) {
        this.data = data;
    }

    @Override
    public String toString() {
        return "code=" + code + " message=" + msg + " data=" + data;
    }

    public static <T> JsonResult<T> fail() {
        JsonResult<T> ret = new JsonResult<T>();
        ret.setCode("201");
        ret.setMsg("失败");
        return ret;
    }

    public static <T>  JsonResult<T> fail(T data) {
        JsonResult<T> ret = JsonResult.fail();
        ret.setData(data);
        return ret;
    }

    public static <T>  JsonResult<T> failMessage(String msg) {
        JsonResult<T> ret = JsonResult.fail();
        ret.setMsg(msg);
        return ret;
    }
    public static <T>  JsonResult<T> successMessage(String msg) {
        JsonResult<T> ret = JsonResult.success();
        ret.setMsg(msg);
        return ret;
    }

    public static <T> JsonResult<T> success() {
        JsonResult<T> ret = new JsonResult<T>();
        ret.setCode("200");
        ret.setMsg("");
        return ret;
    }

    public static <T> JsonResult<T> success(T data) {
        JsonResult<T> ret = JsonResult.success();
        ret.setData(data);
        return ret;
    }

    public static <T> JsonResult<T>  http404(T data) {
        JsonResult<T> ret = new JsonResult<T>();
        ret.setCode("404");
        ret.setMsg("");
        ret.setData(data);
        return ret;
    }

    public static <T> JsonResult<T> http403(T data) {
        JsonResult<T> ret = new JsonResult<T>();
        ret.setCode("403");
        ret.setMsg("");
        ret.setData(data);
        return ret;
    }

}

Controller

package com.example.upload2.controller;

import com.example.upload2.config.JsonResult;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

@Controller
public class UploadController {
    @Value("${uploadFolder}")
    private String filePath;

    private final String MODEL="upload";
    /**
     * 上传文件
     * @param request
     * @param response
     * @param guid
     * @param chunk
     * @param file
     * @param chunks
     */
    @PostMapping(MODEL+ "/upload")
    public void bigFile(HttpServletRequest request, HttpServletResponse response, String guid, Integer chunk, MultipartFile file, Integer chunks){
        if(chunk == null || chunks == null){
            chunk = 0;
            chunks = 1;
        }
        try {
            boolean isMultipart = ServletFileUpload.isMultipartContent(request);
            if (isMultipart) {
                // 临时目录用来存放所有分片文件
                String tempFileDir = filePath + guid;
                File parentFileDir = new File(tempFileDir);
                if (!parentFileDir.exists()) {
                    parentFileDir.mkdirs();
                }
                // 分片处理时，前台会多次调用上传接口，每次都会上传文件的一部分到后台
                String tempFileName = guid + "_" + chunk + ".part";
                File tempPartFile = new File(parentFileDir, tempFileName);
                System.out.println("guid:" + guid);
                System.out.println("fileName:" + file.getOriginalFilename());
                System.out.println("tempFileName:" + tempFileName);
                System.out.println("chunk:" + chunk + ", chunks:" + chunks);
                System.out.println("---------------------------------");
                FileUtils.copyInputStreamToFile(file.getInputStream(), tempPartFile);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 合并文件
     * @param guid
     * @param fileName
     * @throws Exception
     */
    @ResponseBody
    @PostMapping(MODEL+"/merge")
    public JsonResult mergeFile(String guid, String fileName){
        // 得到 destTempFile 就是最终的文件
        try {
            File parentFileDir = new File(filePath + guid);
            if(parentFileDir.isDirectory()){
                File destTempFile = new File(filePath + "/merge", fileName);
                if(!destTempFile.exists()){
                    //先得到文件的上级目录，并创建上级目录，在创建文件,
                    destTempFile.getParentFile().mkdir();
                    try {
                        //创建文件
                        destTempFile.createNewFile(); //上级目录没有创建，这里会报错
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
                System.out.println(parentFileDir.listFiles().length);
                for (int i = 0; i < parentFileDir.listFiles().length; i++) {
                    File partFile = new File(parentFileDir, guid + "_" + i + ".part");
                    FileOutputStream destTempfos = new FileOutputStream(destTempFile, true);
                    //遍历"所有分片文件"到"最终文件"中
                    FileUtils.copyFile(partFile, destTempfos);
                    destTempfos.close();
                }
                // 删除临时目录中的分片文件
                FileUtils.deleteDirectory(parentFileDir);
                return JsonResult.success();
            }
        } catch (Exception e) {
            e.printStackTrace();
            return JsonResult.fail();
        }
        return null;
    }
}

GITHUB地址: git@github.com:wangyanqun321/BlockUpload.git

Ashe_wyq

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot+Webuploader实现大文件分块上传

前端部分用百度的Webuploader（可做断点续传）实现文件分块上传<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1...
复制链接

扫一扫

专栏目录