公司要做一个上传文件的功能,浏览器上传超过500m的文件会崩溃
需要切割分片上传
前端用的百度的 webuploader插件
官网 http://fex.baidu.com/webuploader/
用的springboot
打开后页面为这样
上传文件,我上传的事一个338m的文件,切割为每个32m的文件
上传后,切割为11份,
上传成功后,合并11文件为一个文件,并将11个文件删除
源码地址:
csdn https://download.csdn.net/download/qq_34874784/10743990
码云:https://gitee.com/c1henye/springboot-study
项目结构为
jar 只新增了commons-fileupload这一个jar
pom.xml
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>springboot-bigfile</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>springboot-bigfile</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.6.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<repositories><!-- 代码库 -->
<repository>
<id>maven-ali</id>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
</repository>
</repositories>
<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>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
springboot, 默认限制了上传文件最大为1m,需修改,我修改为了50m
FileConfig
package com.example.springbootbigfile;
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 {
/**
* 文件上传配置
*
* @return MultipartConfigElement
*/
@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();
}
}
application.properties
#文件上传路径
uploadFolder=D:/data/appfiles/
#单个文件最大
multipart.maxFileSize=3000MB
#设置总上传数据总大小
multipart.maxRequestSize=10000MB
server.port=8088
JsonResult
package com.example.springbootbigfile;
/**
* 描述: json格式数据返回对象,使用CustomJsonResultSerializer 来序列化
* @author : lijiazhi
*/
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;
}
}
UploadController
package com.example.springbootbigfile;
import java.io.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
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.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
@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
*/
@RequestMapping( MODEL+ "/upload")
public void bigFile(HttpServletRequest request, HttpServletResponse response,String guid,Integer chunk, MultipartFile file,Integer chunks){
try {
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (isMultipart) {
// 临时目录用来存放所有分片文件
String tempFileDir = filePath + guid;
File parentFileDir = new File(tempFileDir);
if (!parentFileDir.exists()) {
parentFileDir.mkdirs();
}
// 分片处理时,前台会多次调用上传接口,每次都会上传文件的一部分到后台
File tempPartFile = new File(parentFileDir, guid + "_" + chunk + ".part");
FileUtils.copyInputStreamToFile(file.getInputStream(), tempPartFile);
}
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 合并文件
* @param guid
* @param fileName
* @throws Exception
*/
@RequestMapping( MODEL+"/merge")
@ResponseBody
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;
}
}
html
<!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 : 1,// 上传并发数。允许同时最大上传进程数。
// 不压缩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>