当前位置：首页 > wzjs >正文

建设网站的网站企业管理培训课程

wzjs 2025/7/29 16:20:35

建设网站的网站,企业管理培训课程,南昌网站建设制作,如何卸载wordpress原理断点续传：指的是在上传/下载时，将任务（一个文件或压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传/下载。如果碰到网络故障，可以从已经上传/下载的部分开始继续上传/下载未完成的部分&a…

原理

断点续传：指的是在上传/下载时，将任务（一个文件或压缩包）人为的划分为几个部分，每一个部分采用一个线程进行上传/下载。如果碰到网络故障，可以从已经上传/下载的部分开始继续上传/下载未完成的部分，而没有必要从头开始上传/下载。可以节省时间，提高速度。

合并：下载时通过线程池创建任务进行下载或上传、当判断最后一个分片传完时，调用合并方法，根据之前定义的文件名称顺序进行合并，肯能出现最后一个分片传完，之前分片未传完的情况，需要使用for循环进行判断，多文件未传输完，则等待一会继续判断。

本文将详细介绍断点续传、分片下载的前后端完整代码（前端代码需完善，后端逻辑可直接用）

目录结构

一、后端代码

项目依赖

<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.3.1</version></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.1.0</version></dependency>
</dependencies>

application.yml配置

file:upload:dir: D:/tmp
spring:servlet:multipart:enabled: truemax-file-size: 100MBmax-request-size: 100MBfile-size-threshold: 2KB

实体类

FileChunk

import lombok.Data;@Data
public class FileChunk {/*** 当前文件块，从1开始*/private Integer chunkNumber;/*** 分块大小*/private Long chunkSize;/*** 当前分块大小*/private Long currentChunkSize;/*** 总大小*/private Long totalSize;/*** 文件标识*/private String identifier;/*** 文件名*/private String filename;/*** 相对路径*/private String relativePath;/*** 总块数*/private Integer totalChunks;
}

响应类

WebResponse

public class WebResponse {private boolean success;private String message;private Object data;public WebResponse(boolean success, String message, Object data) {this.success = success;this.message = message;this.data = data;}public static WebResponse success(String message, Object data) {return new WebResponse(true, message, data);}public static WebResponse success(String message) {return new WebResponse(true, message, null);}public static WebResponse error(String message) {return new WebResponse(false, message, null);}public boolean isSuccess() {return success;}public void setSuccess(boolean success) {this.success = success;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public Object getData() {return data;}public void setData(Object data) {this.data = data;}
}

断点续传

FileUploadController

import com.dreampen.dto.FileChunk;
import com.dreampen.response.WebResponse;
import com.dreampen.service.FileUploadService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;@RestController
@RequestMapping("/api/upload")
@CrossOrigin // 允许跨域请求
public class FileUploadController {@Autowiredprivate FileUploadService fileUploadService;/*** 检查文件或文件块是否已存在*/@GetMapping("/check")public ResponseEntity<Void> checkFileExists(FileChunk chunk) {boolean exists = fileUploadService.checkFileExists(chunk);if (exists) {// 分片存在，返回 200return ResponseEntity.ok().build();} else {// 分片不存在，返回 404return ResponseEntity.notFound().build();}}/*** 上传文件块*/@PostMapping("/chunk")public WebResponse uploadChunk(@RequestParam(value = "chunkNumber") Integer chunkNumber,@RequestParam(value = "chunkSize") Long chunkSize,@RequestParam(value = "currentChunkSize") Long currentChunkSize,@RequestParam(value = "totalSize") Long totalSize,@RequestParam(value = "identifier") String identifier,@RequestParam(value = "filename") String filename,@RequestParam(value = "totalChunks") Integer totalChunks,@RequestParam("file") MultipartFile file) {String identifierName = identifier;// 如果 identifierName 包含逗号，取第一个值if (identifierName.contains(",")) {identifierName = identifierName.split(",")[0];}FileChunk chunk = new FileChunk();chunk.setChunkNumber(chunkNumber);chunk.setChunkSize(chunkSize);chunk.setCurrentChunkSize(currentChunkSize);chunk.setTotalSize(totalSize);chunk.setIdentifier(identifierName);chunk.setFilename(filename);chunk.setTotalChunks(totalChunks);return fileUploadService.uploadChunk(chunk, file);}/*** 合并文件块*/@PostMapping("/merge")public WebResponse mergeChunks(@RequestParam("identifier") String identifier,@RequestParam("filename") String filename,@RequestParam("totalChunks") Integer totalChunks) {return fileUploadService.mergeChunks(identifier, filename, totalChunks);}
}

FileUploadService

import cn.hutool.core.io.FileUtil;
import com.dreampen.dto.FileChunk;
import com.dreampen.response.WebResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.io.RandomAccessFile;@Service
public class FileUploadService {private static final Logger logger = LoggerFactory.getLogger(FileUploadService.class);@Value("${file.upload.dir}")private String uploadDir;/*** 检查文件是否已上传过*/public boolean checkFileExists(FileChunk chunk) {String storeChunkPath = uploadDir + File.separator + "chunks" + File.separator + chunk.getIdentifier() + File.separator + chunk.getChunkNumber();File storeChunk = new File(storeChunkPath);return storeChunk.exists() && chunk.getChunkSize() == storeChunk.length();}/*** 上传文件块*/public WebResponse uploadChunk(FileChunk chunk, MultipartFile file) {try {if (file.isEmpty()) {return WebResponse.error("文件块为空");}// 创建块文件目录String chunkDirPath = uploadDir + File.separator + "chunks" + File.separator + chunk.getIdentifier();File chunkDir = new File(chunkDirPath);if (!chunkDir.exists()) {chunkDir.mkdirs();}// 保存分块String chunkPath = chunkDirPath + File.separator + chunk.getChunkNumber();file.transferTo(new File(chunkPath));return WebResponse.success("文件块上传成功");} catch (IOException e) {logger.error(e.getMessage(),e);return WebResponse.error("文件块上传失败: " + e.getMessage());}}/*** 合并文件块*/public WebResponse mergeChunks(String identifier, String filename, Integer totalChunks) {try {String chunkDirPath = uploadDir + File.separator + "chunks" + File.separator + identifier;if(!FileUtil.exist(chunkDirPath)){return WebResponse.error("文件合并失败, 目录不存在" );}File chunkDir = new File(chunkDirPath);// 创建目标文件String filePath = uploadDir + File.separator + filename;File destFile = new File(filePath);if (destFile.exists()) {destFile.delete();}// 使用RandomAccessFile合并文件块try (RandomAccessFile randomAccessFile = new RandomAccessFile(destFile, "rw")) {byte[] buffer = new byte[1024];for (int i = 1; i <= totalChunks; i++) {File chunk = new File(chunkDirPath + File.separator + i);if (!chunk.exists()) {return WebResponse.error("文件块" + i + "不存在");}try (java.io.FileInputStream fis = new java.io.FileInputStream(chunk)) {int len;while ((len = fis.read(buffer)) != -1) {randomAccessFile.write(buffer, 0, len);}}}}// 清理临时文件块FileUtil.del(chunkDir);return WebResponse.success("文件合并成功", filePath);} catch (IOException e) {logger.error(e.getMessage(),e);return WebResponse.error("文件合并失败: " + e.getMessage());}}
}

分片下载

FileDownloadController

import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;import java.io.File;
import java.io.IOException;
import java.io.RandomAccessFile;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/api/download")
@CrossOrigin
public class FileDownloadController {@Value("${file.upload.dir}")private String uploadDir;/*** 获取文件列表*/@GetMapping("/files")public ResponseEntity<List<Map<String, Object>>> getFileList() {File dir = new File(uploadDir);if (!dir.exists() || !dir.isDirectory()) {return ResponseEntity.ok(new ArrayList<>());}List<Map<String, Object>> fileList = new ArrayList<>();File[] files = dir.listFiles((d, name) -> !name.equals("chunks"));if (files != null) {for (File file : files) {if (file.isFile()) {Map<String, Object> fileInfo = new HashMap<>();fileInfo.put("fileName", file.getName());fileInfo.put("size", file.length());fileList.add(fileInfo);}}}return ResponseEntity.ok(fileList);}/*** 分片下载文件*/@GetMapping("/chunk/{fileName}")public ResponseEntity<byte[]> downloadChunk(@PathVariable String fileName,@RequestHeader(value = "Range", required = false) String rangeHeader) {File file = new File(uploadDir + File.separator + fileName);if (!file.exists()) {return ResponseEntity.notFound().build();}try {long fileLength = file.length();long start = 0;long end = fileLength - 1;// 解析Range头if (rangeHeader != null && rangeHeader.startsWith("bytes=")) {String[] ranges = rangeHeader.substring("bytes=".length()).split("-");start = Long.parseLong(ranges[0]);if (ranges.length > 1 && !ranges[1].isEmpty()) {end = Long.parseLong(ranges[1]);}}// 边界检查if (start < 0 || end >= fileLength || start > end) {return ResponseEntity.status(HttpStatus.REQUESTED_RANGE_NOT_SATISFIABLE).build();}long contentLength = end - start + 1;// 读取指定范围的文件内容byte[] content = new byte[(int) contentLength];try (RandomAccessFile randomAccessFile = new RandomAccessFile(file, "r")) {randomAccessFile.seek(start);randomAccessFile.read(content);}HttpHeaders headers = new HttpHeaders();headers.add("Content-Range", String.format("bytes %d-%d/%d", start, end, fileLength));headers.add("Accept-Ranges", "bytes");headers.add("Content-Type", "application/octet-stream");headers.add("Content-Length", String.valueOf(contentLength));headers.add("Content-Disposition", "attachment; filename=\"" + fileName + "\"");return new ResponseEntity<>(content, headers, rangeHeader != null ? HttpStatus.PARTIAL_CONTENT : HttpStatus.OK);} catch (IOException e) {e.printStackTrace();return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();}}
}

前端代码

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"><style>.upload-container, .download-container {margin-top: 30px;padding: 20px;border: 1px solid #ddd;border-radius: 5px;}.progress {margin-top: 10px;height: 25px;}.file-list {margin-top: 20px;}.file-item {padding: 10px;margin-bottom: 5px;border: 1px solid #eee;border-radius: 5px;display: flex;justify-content: space-between;align-items: center;}</style>
</head>
<body>
<div class="container"><!-- 上传区域 --><div class="upload-container"><h3>文件上传（支持断点续传）</h3><div class="mb-3"><label for="fileUpload" class="form-label">选择文件</label><input class="form-control" type="file" id="fileUpload"></div><button id="uploadBtn" class="btn btn-primary">上传文件</button><div class="progress d-none" id="uploadProgress"><div class="progress-bar" role="progressbar" style="width: 0%;" id="uploadProgressBar">0%</div></div><div id="uploadStatus" class="mt-2"></div></div><div class="download-container"><h3>文件列表</h3><button id="refreshBtn" class="btn btn-secondary mb-3">刷新文件列表</button><div id="fileList" class="file-list"><div class="alert alert-info">点击刷新按钮获取文件列表</div></div><div class="progress d-none" id="downloadProgress"><div class="progress-bar" role="progressbar" style="width: 0%;" id="downloadProgressBar">0%</div></div><button id="pauseBtn" class="btn btn-warning mt-2 d-none" onclick="toggleDownload()">暂停</button><div id="downloadStatus" class="mt-2"></div></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/resumablejs@1.1.0/resumable.min.js"></script><script>// 基础配置const API_BASE_URL = 'http://localhost:8555/api';// DOM元素const uploadBtn = document.getElementById('uploadBtn');const fileUpload = document.getElementById('fileUpload');const uploadProgress = document.getElementById('uploadProgress');const uploadProgressBar = document.getElementById('uploadProgressBar');const uploadStatus = document.getElementById('uploadStatus');const refreshBtn = document.getElementById('refreshBtn');const fileList = document.getElementById('fileList');const downloadProgress = document.getElementById('downloadProgress');const downloadProgressBar = document.getElementById('downloadProgressBar');const downloadStatus = document.getElementById('downloadStatus');// 初始化resumable.jsconst resumable = new Resumable({target: `${API_BASE_URL}/upload/chunk`,query: {},chunkSize: 1 * 1024 * 1024, // 分片大小为1MBsimultaneousUploads: 3,testChunks: true,throttleProgressCallbacks: 1,chunkNumberParameterName: 'chunkNumber',chunkSizeParameterName: 'chunkSize',currentChunkSizeParameterName: 'currentChunkSize',totalSizeParameterName: 'totalSize',identifierParameterName: 'identifier',fileNameParameterName: 'filename',totalChunksParameterName: 'totalChunks',method: 'POST',headers: {'Accept': 'application/json'},testMethod: 'GET',testTarget: `${API_BASE_URL}/upload/check`});// 分配事件监听器resumable.assignBrowse(fileUpload);// 文件添加事件 - 显示文件名resumable.on('fileAdded', function(file) {console.log('File added:', file);// 显示已选择的文件名uploadStatus.innerHTML = `<div class="alert alert-info">已选择文件: ${file.fileName} (${formatFileSize(file.size)})</div>`;// 显示文件信息卡片const fileInfoDiv = document.createElement('div');fileInfoDiv.className = 'card mt-2 mb-2';fileInfoDiv.innerHTML = `<div class="card-body"><h5 class="card-title">文件信息</h5><p class="card-text">文件名: ${file.fileName}</p><p class="card-text">大小: ${formatFileSize(file.size)}</p><p class="card-text">类型: ${file.file.type || '未知'}</p><p class="card-text">分片数: ${file.chunks.length}</p></div>`;// 清除旧的文件信息const oldFileInfo = document.querySelector('.card');if (oldFileInfo) {oldFileInfo.remove();}// 插入到uploadStatus之前uploadStatus.parentNode.insertBefore(fileInfoDiv, uploadStatus);});// 格式化文件大小function formatFileSize(bytes) {if (bytes === 0) return '0 Bytes';const k = 1024;const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];const i = Math.floor(Math.log(bytes) / Math.log(k));return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];}// 分块开始事件resumable.on('chunkingStart', function(file) {console.log('开始分块:', file.fileName);});// 分块进度事件resumable.on('chunkingProgress', function(file, ratio) {console.log('分块进度:', Math.floor(ratio * 100) + '%');});// 分块完成事件resumable.on('chunkingComplete', function(file) {console.log('分块完成');});// 上传开始事件resumable.on('uploadStart', function() {console.log('开始上传');uploadStatus.innerHTML = '<div class="alert alert-info">开始上传文件块...</div>';window.mergeCalled = false;});// 上传进度事件resumable.on('fileProgress', function(file) {const progress = Math.floor(file.progress() * 100);uploadProgress.classList.remove('d-none');uploadProgressBar.style.width = `${progress}%`;uploadProgressBar.textContent = `${progress}%`;// 显示当前上传块信息const uploadedChunks = file.chunks.filter(chunk => chunk.status === 2).length;const totalChunks = file.chunks.length;uploadStatus.innerHTML = `<div class="alert alert-info">正在上传: ${uploadedChunks}/${totalChunks} 块 (${progress}%)</div>`;});// 总体进度事件resumable.on('progress', function() {console.log('总体进度:', Math.floor(resumable.progress() * 100) + '%');});// 上传成功事件resumable.on('fileSuccess', function(file, response) {console.log('文件上传成功，准备合并');const parsedResponse = JSON.parse(response);if (parsedResponse.success) {// 避免重复调用合并接口if (window.mergeCalled) {console.log('合并已经调用过，跳过');return;}window.mergeCalled = true;uploadStatus.innerHTML = '<div class="alert alert-info">所有分块上传成功，正在合并文件...</div>';// 使用FormData发送合并请求const formData = new FormData();formData.append('identifier', file.uniqueIdentifier);formData.append('filename', file.fileName);formData.append('totalChunks', file.chunks.length);axios.post(`${API_BASE_URL}/upload/merge`, formData).then(function(response) {if (response.data.success) {uploadStatus.innerHTML = `<div class="alert alert-success">文件上传并合并成功！</div>`;// 刷新文件列表refreshFileList();} else {uploadStatus.innerHTML = `<div class="alert alert-danger">文件合并失败: ${response.data.message}</div>`;}}).catch(function(error) {uploadStatus.innerHTML = `<div class="alert alert-danger">合并请求出错: ${error.message}</div>`;});} else {uploadStatus.innerHTML = `<div class="alert alert-danger">上传失败: ${parsedResponse.message}</div>`;}});// 块上传错误事件resumable.on('chunkUploadError', function(file, chunk, message) {console.error('块上传错误:', chunk.offset, message);uploadStatus.innerHTML = `<div class="alert alert-warning">块 ${chunk.offset+1}/${file.chunks.length} 上传失败，系统将重试</div>`;});// 上传错误事件resumable.on('fileError', function(file, response) {try {const parsedResponse = JSON.parse(response);uploadStatus.innerHTML = `<div class="alert alert-danger">上传错误: ${parsedResponse.message || '未知错误'}</div>`;} catch (e) {uploadStatus.innerHTML = `<div class="alert alert-danger">上传错误: ${response || '未知错误'}</div>`;}});// 点击上传按钮事件uploadBtn.addEventListener('click', function() {if (!resumable.files.length) {uploadStatus.innerHTML = '<div class="alert alert-warning">请先选择文件！</div>';return;}uploadStatus.innerHTML = '<div class="alert alert-info">开始上传...</div>';resumable.upload();});// 获取文件列表function refreshFileList() {axios.get(`${API_BASE_URL}/download/files`).then(function(response) {if (response.data.length > 0) {let html = '';response.data.forEach(function(file) {html += `<div class="file-item"><span>${file.fileName} (${formatFileSize(file.size)})</span><div><button class="btn btn-primary btn-sm" onclick="startDownload('${file.fileName}')" id="downloadBtn-${file.fileName}">下载</button><button class="btn btn-warning btn-sm d-none" onclick="toggleDownload()" id="pauseBtn">暂停</button></div></div>`;});fileList.innerHTML = html;} else {fileList.innerHTML = '<div class="alert alert-info">没有文件</div>';}}).catch(function(error) {fileList.innerHTML = `<div class="alert alert-danger">获取文件列表失败: ${error.message}</div>`;});}// 全局变量用于控制下载状态let isDownloading = false;let downloadedChunks = [];let currentFileName = '';let currentStart = 0;let currentTotalSize = 0;// 切换下载状态function toggleDownload() {const pauseBtn = document.getElementById('pauseBtn');if (isDownloading) {isDownloading = false;pauseBtn.textContent = '继续';downloadStatus.innerHTML = '<div class="alert alert-warning">下载已暂停</div>';} else {isDownloading = true;pauseBtn.textContent = '暂停';if (currentFileName) {continueDownload();}}}// 继续下载async function continueDownload() {if (!currentFileName || !isDownloading) return;downloadStatus.innerHTML = '<div class="alert alert-info">继续下载文件...</div>';await startDownload(currentFileName, true);}// 分片下载文件async function startDownload(fileName, isContinue = false) {// 检查是否正在下载if (isDownloading && !isContinue) {downloadStatus.innerHTML = '<div class="alert alert-warning">文件正在下载中，请等待当前下载完成...</div>';return;}// 禁用当前文件的下载按钮const downloadBtn = document.getElementById(`downloadBtn-${fileName}`);if (downloadBtn) {downloadBtn.disabled = true;downloadBtn.classList.add('disabled');}const chunkSize = 1024 * 1024; // 1MB per chunklet downloadedSize = 0;try {// 重置下载状态if (!isContinue) {currentFileName = fileName;currentStart = 0;downloadedChunks = [];isDownloading = true;// 获取文件大小const response = await axios.get(`${API_BASE_URL}/download/chunk/${fileName}`);currentTotalSize = parseInt(response.headers['content-length']);}downloadProgress.classList.remove('d-none');document.getElementById('pauseBtn').classList.remove('d-none');document.getElementById('pauseBtn').textContent = '暂停';// 计算已下载大小downloadedSize = downloadedChunks.reduce((acc, chunk) => acc + chunk.size, 0);while (currentStart < currentTotalSize && isDownloading) {const end = Math.min(currentStart + chunkSize, currentTotalSize);const chunk = await downloadChunk(fileName, currentStart, end, currentTotalSize);downloadedChunks.push(chunk);downloadedSize += chunk.size;// 更新进度const progress = Math.floor((downloadedSize / currentTotalSize) * 100);downloadProgressBar.style.width = `${progress}%`;downloadProgressBar.textContent = `${progress}%`;downloadStatus.innerHTML = `<div class="alert alert-info">已下载: ${formatFileSize(downloadedSize)} / ${formatFileSize(currentTotalSize)}</div>`;currentStart = end;}// 如果下载完成if (currentStart >= currentTotalSize) {// 合并所有分片const blob = new Blob(downloadedChunks, { type: 'application/octet-stream' });const url = window.URL.createObjectURL(blob);// 创建下载链接const a = document.createElement('a');a.href = url;a.download = fileName;document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);document.body.removeChild(a);// 重置状态downloadStatus.innerHTML = '<div class="alert alert-success">文件下载完成！</div>';document.getElementById('pauseBtn').classList.add('d-none');resetDownloadState();}} catch (error) {downloadStatus.innerHTML = `<div class="alert alert-danger">下载失败: ${error.message}</div>`;console.error('下载错误:', error);resetDownloadState();}}// 重置下载状态function resetDownloadState() {isDownloading = false;currentFileName = '';currentStart = 0;currentTotalSize = 0;downloadedChunks = [];// 恢复所有下载按钮状态document.querySelectorAll('[id^="downloadBtn-"]').forEach(btn => {btn.disabled = false;btn.classList.remove('disabled');});}// 下载单个分片async function downloadChunk(fileName, start, end, total) {const response = await axios.get(`${API_BASE_URL}/download/chunk/${fileName}`, {headers: {Range: `bytes=${start}-${end-1}`},responseType: 'blob'});return response.data;}// 刷新按钮事件refreshBtn.addEventListener('click', refreshFileList);// 初始加载文件列表document.addEventListener('DOMContentLoaded', function() {refreshFileList();});
</script></body>
</html>