1.效果图
2.前端html
<!DOCTYPE html>
<html>
<head></head>
<body>
<form><input type="file" id="fileInput" multiple><button type="button" onclick="upload()" >大文件分片上传</button>
</form>
<script>function upload() {var fileInput = document.getElementById('fileInput');var fileName = document.getElementById("fileInput").files[0].name;var files = fileInput.files;var chunkSize = 1024 * 1024 * 10; // 每个块的大小为10MBvar totalChunks = Math.ceil(files[0].size / chunkSize); // 文件总块数var currentChunk = 0; // 当前块数console.log("当前文件:"+fileName+",大小:"+files[0].size+",分片大小:"+chunkSize+",分片数:"+totalChunks);// 分片上传文件function uploadChunk() {var xhr = new XMLHttpRequest();var formData = new FormData();// 将当前块数和总块数添加到formData中formData.append('current_slice_index', currentChunk);formData.append('file_name', fileName);formData.append('user_name', "15910761260");// 计算当前块在文件中的偏移量和长度var start = currentChunk * chunkSize;var end = Math.min(files[0].size, start + chunkSize);var chunk = files[0].slice(start, end);// 添加当前块到formData中formData.append('file', chunk);// 发送分片到后端xhr.open('POST', 'http://192.x.x.x:8060/file/fileInfo/uploadSlice');xhr.send(formData);xhr.onload = function(data) {console.log('上传第'+ currentChunk +'个分片结果:'+xhr.responseText);// 需要判断反馈结果,如果成功,才继续,否则再次上传失败部分// 更新当前块数currentChunk++;// 如果还有未上传的块,则继续上传if (currentChunk < totalChunks) {uploadChunk();} else {// 所有块都上传完毕,进行文件合并console.log("开始合并");mergeChunks(fileName);}}}// 合并所有分片function mergeChunks() {var xhr = new XMLHttpRequest();var formData = new FormData();formData.append('user_name', "15910761260");formData.append('total_slice_num', totalChunks);formData.append('file_name', fileName);formData.append('file_owner', 'MediaResource');formData.append('order_code', 'MediaResource');formData.append('folder', 'MediaResource');xhr.open("POST", "http://192.x.x.x:8060/file/fileInfo/mergeSlice");xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {console.log("文件合并完成:", xhr.responseText);} else {console.error(xhr.responseText);}}};xhr.send(formData);}// 开始上传uploadChunk();}
</script>
</body>
</html>
2.java代码
上传分片代码
@ResponseBody@PostMapping(value = "/uploadSlice")@Operation(summary = "上传文件分片", description = "返回是否上传成功")public MisResult<String> UploadSlice(UploadFileSliceInput uploadFileSliceInput,@RequestParam(value = "file") MultipartFile multipartFile) throws Exception {return fileInfoService.UploadSlice(uploadFileSliceInput, multipartFile.getBytes());}@Overridepublic MisResult<String> UploadSlice(UploadFileSliceInput uploadFileSliceInput, byte[] content) {MisResult<String> result = new MisResult<>();try {//参数校验ValidateUtil.ValidateThrowException(uploadFileSliceInput);if (content == null || content.length == 0) {result.Error(MisResultCode.PARAM_ERROR);return result;}//判断分片是否已上传String nameMd5 = DigestUtils.md5Hex(uploadFileSliceInput.getFile_name());String redisKey = nameMd5 + "_" + uploadFileSliceInput.getUser_name();String chunkStatus = (String) RedisUtil.HashGet(redisKey, uploadFileSliceInput.getCurrent_slice_index() + "");if (StringUtils.hasLength(chunkStatus) && MisStatus.Finished.equals(chunkStatus)) {result.Success("文件分片上传成功!");return result;}//保存文件分片到临时文件夹String absolutePath = FileConfig.Path + File.separator + "temp" + File.separator + "slice_" + nameMd5+ "_" + uploadFileSliceInput.getCurrent_slice_index();File saveFile = new File(absolutePath);FileCopyUtils.copy(content, saveFile);//记录上传状态long timeout = RedisUtil.GetExpire(redisKey);RedisUtil.HashSet(redisKey, uploadFileSliceInput.getCurrent_slice_index() + "", MisStatus.Finished);result.Success("文件分片上传成功!");if (timeout < 0) {RedisUtil.SetExpire(redisKey, 60 * 60);//1个小时超时删除}} catch (Exception e) {result.Error(MisResultCode.UNKNOWN_ERROR, "分片上传异常," + e.getMessage());log.error("分片上传异常", e);}return result;}
上传参数
package mis.dto.file.fileinfo;import io.swagger.v3.oas.annotations.media.Schema;
import jakarta.validation.constraints.NotNull;
import lombok.Data;
import lombok.experimental.Accessors;/*** description 分片上传文件dto*/
@Schema(description = "分片上传文件dto")
@Data
@Accessors(chain = true)
public class UploadFileSliceInput {@NotNull@Schema(description = "上传手机号")private String user_name;@NotNull@Schema(description = "文件名")private String file_name;@NotNull@Schema(description = "当前分片序号")private int current_slice_index;}
合并分片代码
@ResponseBody@PostMapping(value = "/mergeSlice")@Operation(summary = "合并文件分片", description = "返回是否上传成功")public MisResult<FileInfoOutput> MergeSlice(UploadFileSliceMerge uploadFileSliceMerge) throws Exception {return fileInfoService.MergeSlice(uploadFileSliceMerge);}@Overridepublic MisResult<FileInfoOutput> MergeSlice(UploadFileSliceMerge uploadFileSliceMerge) throws Exception {MisResult<FileInfoOutput> result = new MisResult<>();//参数校验,非空项及上传分片数量是否正确ValidateUtil.ValidateThrowException(uploadFileSliceMerge);String nameMd5 = DigestUtils.md5Hex(uploadFileSliceMerge.getFile_name());String redisKey = nameMd5 + "_" + uploadFileSliceMerge.getUser_name();Map<Object, Object> sliceMap = RedisUtil.HashGetMap(redisKey);if (sliceMap.size() != uploadFileSliceMerge.getTotal_slice_num()) {result.Error(MisResultCode.MIS_ERR_NOTEXITS, "文件分片上传不完整," + uploadFileSliceMerge.getUser_name());log.error(result.getMessage());return result;}//根据分片文件序号排列File tmpDir = new File(FileConfig.Path + File.separator + "temp");File[] sliceFiles = tmpDir.listFiles((dir, name) -> name.contains("slice") &&name.contains(nameMd5));if (sliceFiles == null) {result.Error(MisResultCode.MIS_ERR_NOTEXITS, "文件分片不存在!");return result;}Arrays.sort(sliceFiles, (o1, o2) -> {String o1Index = o1.getName().replace("_", "").replace("slice", "").replace(nameMd5, "");String o2Index = o2.getName().replace("_", "").replace("slice", "").replace(nameMd5, "");return Integer.parseInt(o1Index) - Integer.parseInt(o2Index);});//设置最终存储路径String fileOwner = StringUtils.hasLength(uploadFileSliceMerge.getFile_owner()) ?uploadFileSliceMerge.getFile_owner() : "unknown";//文件拥有者String newFileName = UuidGenerator.generate() + "." + FileUtil.GetSuffix(uploadFileSliceMerge.getFile_name());//新文件名String storageDir = FileConfig.Path + File.separator;if (StringUtils.hasLength(uploadFileSliceMerge.getFolder())) {storageDir += uploadFileSliceMerge.getFolder();//存储目录} else {storageDir += DateUnitl.ToString(null, "yyyyMM") + File.separator + fileOwner;//存储目录}if (!new File(storageDir).exists()) {new File(storageDir).mkdirs();}String absolutePath = storageDir + File.separator + newFileName;//存储绝对路径String filePath = absolutePath.replace(FileConfig.Path, "");//存储相对路径//合并分片文件FileChannel outChannel = null;FileOutputStream outputStream = null;try {outputStream = new FileOutputStream(absolutePath);outChannel = outputStream.getChannel();for (int i = 0; i < sliceFiles.length; i++) {FileInputStream inputStream = new FileInputStream(sliceFiles[i]);try (FileChannel inChannel = inputStream.getChannel()) {inChannel.transferTo(0, inChannel.size(), outChannel);FileUtil.Close(inChannel);}FileUtil.Close(inputStream);}} catch (Exception e) {log.error("合并分片异常", e);result.Error(MisResultCode.ACTION_ERROR, "合并分片异常," + uploadFileSliceMerge.getFile_name());return result;} finally {FileUtil.Close(outChannel);FileUtil.Close(outputStream);}//保存最终文件信息File bigFile = new File(absolutePath);String uuid = UuidGenerator.generate();String downloadUrl = FileConfig.Access + "?fileInfoId=" + uuid;FileInfo newFileInfo = new FileInfo(uuid).setFile_owner(fileOwner).setOrder_code(uploadFileSliceMerge.getOrder_code()).setFile_name(uploadFileSliceMerge.getFile_name()).setFile_path(filePath).setFile_absolute_path(absolutePath).setFile_size(bigFile.length()).setFile_type(FileUtil.JudgeFileTypeByName(uploadFileSliceMerge.getFile_name())).setFile_status(MisStatus.Enable).setDownload_path(downloadUrl).setNote(MisServerConfig.App);var savedFile = this.fileInfoRepository.save(newFileInfo);//清理分片和缓存for (File sliceFile : sliceFiles) {sliceFile.delete();}RedisUtil.Delete(nameMd5 + "_" + uploadFileSliceMerge.getUser_name());//返回文件对象var modelMapper = new ModelMapper();var fileInfoOutput = modelMapper.map(savedFile, FileInfoOutput.class);fileInfoOutput.setPreview_path("/file/fileInfo/preview?fileInfoId=" + uuid);result.Success(fileInfoOutput);return result;}
合并分片参数
package mis.dto.file.fileinfo;import io.swagger.v3.oas.annotations.media.Schema;
import jakarta.validation.constraints.NotNull;
import lombok.Data;
import lombok.experimental.Accessors;/*** description 合并分片参数dto*/
@Schema(description = "分片上传文件dto")
@Data
@Accessors(chain = true)
public class UploadFileSliceMerge {//合并参数@NotNull@Schema(description = "上传手机号")private String user_name;@NotNull@Schema(description = "总分片数")private double total_slice_num;//文件参数@NotNull@Schema(description = "文件名")private String file_name;//文件名@Schema(description = "文件持有人")private String file_owner;//文件持有人@Schema(description = "单据编码")private String order_code;//单据编码@Schema(description = "文件夹,如果文件夹不为空,则使用传入的文件夹保存文件")private String folder;//文件夹,如果文件夹不为空,则使用传入的文件夹保存文件}