文件分片上传_同步
前言
文件上传需求很常见,本次实现大文件分片上传.
前端使用webuploader插件对大文件进行分片
后台使用MultipartFile对分片的文件进行接收
后台接收到每片文件进行输出
接收到所有分片的信息后对所有分片进行合并
一、前期准备
1.上传页面
1)前端采用html页面
引入jq,webuploader插件,注意放置springboot位置,所有静态页面在resources文件夹下新建static(本文采用) 或者template文件夹下
2)upload.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/webuploader/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
<link type="text/css" href="/webuploader/bootstrap-theme.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="webuploader/bootstrap.min.js"></script>
<style>
.rg_layout{
width: 500px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: #d9edf7;
/*让div水平居中*/
margin: auto;
padding: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
</style>
<script >
$(function () {
var guid
var uploader = WebUploader.create({
// swf文件路径
swf : 'webuploader/Uploader.swf',
// 文件接收服务端。
// server : 'http://localhost:8080/fileUploaderServlet',
server : "/fileUpload/file",
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick : {id:'#picker'},
chunked: true, //分片处理
chunkSize: 50 * 1024 * 1024, //每片1M
threads:1,//上传并发数。允许同时最大上传进程数。
formData:{'guid':guid},
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize : false
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function(file) {
$("#thelist").empty();
$("#thelist").append('<h4 id="info" class="info">' + file.name + '</h4>');
});
// 当文件开始上传的时候
uploader.on('uploadStart', function() {
guid = uploader.options.formData.guid = Math.random().toString().substring(2,8);
$("#info").text("文件正在上传....")
});
//
uploader.on('uploadFinished',function () {
$("#info").empty();
$("#thelist").append('<h4 id="info" class="info">' + '文件上传完成' + '</h4>');
});
$("#ctlBtn").on ('click',function () {
if ($(this).hasClass('disabled')){
alert("disabled");
return false;
}
uploader.upload();
})
});
</script>
</head>
<body>
<div id="uploader" class="rg_layout">
<div class="rg_left">
<div id="picker">选择文件</div>
<div id="thelist" class="uploader-list"></div>
</div>
<div class="rg_right">
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
</body>
</html>
3)前端代码分析
主要进行如下配置:
server:后台接收url
pick属性
chunked是否分片
chunkSize每片大小
formData:表单提交需要传递的参数
每次分片请求我们期望产生一随机数(尽可能不重复)guid
guid作为以后临时文件的文件夹
至此一个简单的前端页面完成!
4)完成代码启动前端页面:端口:9150
2.后端准备
1)配置application.yml
springboot会默认配置请求大小1M,修改每次请求大小限制
2)实现如下包结构和VO创建
base包下为一些基础的结果集:Result ResultEnum
Result
package com.service.management.base;
import lombok.Data;
import java.io.Serializable;
@Data
public class Result<T> implements Serializable {
private String code;
private String msg;
private T data;
public Result(){ }
public Result(String code, String msg, T data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public Result(String code) {
this.code = code;
}
public static Result success (Object object){
Result result = new Result();
result.setCode(ResultEnum.SUCCESS.getCode());
result.setMsg(ResultEnum.SUCCESS.getMsg());
result.setData(object);
return result;
}
public static Result error (Object object){
Result result = new Result();
result.setCode(ResultEnum.UNKNOW_ERROR.getCode());
result.setMsg(ResultEnum.UNKNOW_ERROR.getMsg());
result.setData(object);
return result;
}
}
ResultEnum
package com.service.management.base;
public enum ResultEnum {
SUCCESS("1","success"),
UNKNOW_ERROR("104","error"),
EXCEPTION("105","excption");
private String code;
private String msg;
public String getCode() {
return code;
}
public String getMsg() {
return msg;
}
ResultEnum(String code , String msg){
this.code = code;
this.msg = msg;
}
}
controller包记得添加@RestController注解
FileUploadController
package com.service.management.controller;
import com.service.management.base.Result;
import com.service.management.service.FileUploadService;
import com.service.management.vo.BreakPointFile;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/fileUpload")
public class FileUploadController {
@Autowired
private FileUploadService fileUploadService;
@PostMapping(value = "/file")
public Result FileUpload(BreakPointFile breakPointFile){
return fileUploadService.uploadFile(breakPointFile);
}
}
IoUtils
package com.service.management.utils;
import java.io.Closeable;
import java.io.IOException;
public class IoUtils {
public static void Close(Closeable io){
if (io != null){
try {
io.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
vo包下BreakPointFile为接收文件的VO对象
BreakPointFile
package com.service.management.vo;
import lombok.Data;
import org.springframework.web.multipart.MultipartFile;
@Data
public class BreakPointFile {
private String id;
private String name ;
private String guid;
private Long size;
private Integer chunks;
private Integer chunk;
private MultipartFile file;
}
二、后端实现
后端主要在service(业务层)实现
1. 接收分片文件
通过webuploader插件分片过来的文件使用BreakPointFile 对象接收
看下表单提交过来的数据:
根据guid 创建文件夹
chunks:为总片数
chunk:为当前片从0开始
后台根据guid创建临时文件夹
根据chunk编号创建分片文件
outPutSliceFile()方法: 简单文件写入方法
启动服务观察实现效果:
选择文件上传: upload.html 分片改为(10M)测试
观察后台输出日志:
分了四片 guid=124672
在本地124672文件下:
分片完成!!!
2. 合并分片文件
文件分片完成后,什么时候去合成呢? 在这里实现是:临时文件总数等于chunks时,就认为所有分片完成,开始合并:
遍历所有文件,写入要合成的文件:
重复上传文件操作,查看日志输出:
guid=325215
文件合并已经完成!!!
3. 删除临时文件
合并完成后,需删除分片文件deletTempFIles()方法:
删除临时分片文件,保留最后合成的文件
4. 业务层代码
package com.service.management.service;
import com.service.management.base.Result;
import com.service.management.utils.IoUtils;
import com.service.management.vo.BreakPointFile;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Arrays;
import java.util.Comparator;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.stream.Collectors;
@Service
public class FileUploadService {
private static final Logger LOGGER = LoggerFactory.getLogger(FileUploadService.class);
public Result uploadFile(BreakPointFile breakPointFile) {
Result result = Result.success(breakPointFile.getName());
String fileId = breakPointFile.getGuid();
Integer chunk =
breakPointFile.getChunk() == null ? 0 : breakPointFile.getChunk();
Integer chunks =
breakPointFile.getChunks() == null ? 1 : breakPointFile.getChunks();
File fileDir = null;
try {
fileDir = new File("F:/tempFile/" + fileId);
if (!fileDir.isDirectory()) {
fileDir.mkdirs();
}
File file = new File(fileDir, chunk + "");
if (!file.exists()) {
file.createNewFile();
}
outPutSliceFile(file,breakPointFile);
LOGGER.info("分片上传({}/{})" ,chunk+1,chunks);
} catch (Exception e) {
e.printStackTrace();
Result.error(e);
}
if (chunks.intValue() == chunk + 1) {
LOGGER.info("分片完成!");
LOGGER.info("开始合并...");
InputStream in = null;
OutputStream out = null;
try {
String path = fileDir.getAbsolutePath() + "/" + breakPointFile.getName();
File[] files = fileDir.listFiles();
List<File> fileList = Arrays.asList(files);
List<File> list = fileList.stream()
.sorted(Comparator.comparing(this::getSortName))
.collect(Collectors.toList());
out = new FileOutputStream(path);
for (File file : list) {
in = new FileInputStream(file);
int len = 0;
byte[] bt = new byte[1024];
while (-1 != (len = in.read(bt))) {
out.write(bt, 0, len);
}
in.close();
}
// 删除上传的分片文件
// deletTempFIles(fileList);
} catch (Exception e) {
e.printStackTrace();
Result.error(e);
} finally {
IoUtils.Close(in);
IoUtils.Close(out);
}
LOGGER.info("合并完成!");
LOGGER.info("文件上传完成! fieId = " + fileId);
}
return result;
}
private void deletTempFIles(List<File> fileList) {
Iterator<File> iterator = fileList.iterator();
iterator.forEachRemaining(file -> {
file.delete();
});
}
private void outPutSliceFile(File file, BreakPointFile breakPointFile) throws IOException {
OutputStream outSliceFile = new FileOutputStream(file);
byte[] bytes = breakPointFile.getFile().getBytes(); //保存文件
outSliceFile.write(bytes);
IoUtils.Close(outSliceFile);
}
private int getSortName(File file) {
int i = Integer.parseInt(file.getName());
return i;
}
}
总结
今天主要完成了文件的分片上传,合成,最后删除临时分片文件.
同时也发现分片后同步请求效率也不是最佳.
下节实现前端用H5实现分片,并通过ajax发送异步请求后台接口
感谢您看完这篇文章，本人也在学习和摸索中，如有问题，欢迎指正和交流
1340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
