java springboot 切割分片上傳大檔案
阿新 • • 發佈:2018-11-15
公司要做一個上傳檔案的功能,瀏覽器上傳超過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>