企业官网建设流程全解析

1. 大文件上传的技术挑战与解决方案

作为一名经历过无数"奇葩需求"的老程序员，我深知大文件上传功能在实际开发中的痛点。特别是当需求方提出"20G文件上传+IE8兼容"这种近乎不可能完成的任务时，那种绝望感简直比东北零下30度的寒风还刺骨。

1.1 传统文件上传的局限性

传统的表单文件上传方式（<input type="file">）存在几个致命缺陷：

1. 内存占用高：浏览器会尝试将整个文件加载到内存，大文件直接导致浏览器崩溃
2. 无断点续传：网络中断后必须重新上传
3. 无进度显示：用户无法知晓上传进度
4. 兼容性问题：现代API在老旧浏览器上无法使用

1.2 分块上传的核心原理

分块上传（Chunked Upload）是将大文件分割成多个小块（如5MB/块），然后分批上传的技术方案。其核心优势在于：

• 内存友好：每次只处理一个小块
• 支持断点续传：记录已上传的块，网络恢复后继续上传剩余部分
• 进度可控：可以精确计算上传百分比
• 并行上传：多个块可以同时上传提高速度

2. JSP环境下的分块上传实现

2.1 前端实现方案

2.1.1 现代浏览器方案

对于现代浏览器（Chrome/Firefox/Edge等），我们可以使用HTML5的File API：

// 文件分片处理 function uploadFile(file) { const chunkSize = 5 * 1024 * 1024; // 5MB const totalChunks = Math.ceil(file.size / chunkSize); const fileMd5 = await calculateMD5(file); // 计算文件唯一标识 for (let i = 0; i < totalChunks; i++) { const start = i * chunkSize; const end = Math.min(start + chunkSize, file.size); const chunk = file.slice(start, end); const formData = new FormData(); formData.append('file', chunk); formData.append('chunkNumber', i); formData.append('totalChunks', totalChunks); formData.append('fileMd5', fileMd5); await axios.post('/upload', formData, { onUploadProgress: progress => { const percent = Math.round( ((i * chunkSize) + progress.loaded) / file.size * 100 ); updateProgress(percent); } }); } }

2.1.2 IE8兼容方案

对于IE8这种"古董"浏览器，我们不得不使用Flash或ActiveX方案：

function initIEFileUpload() { if (typeof window.ActiveXObject != "undefined") { // 使用ActiveX组件 try { var uploader = new ActiveXObject("MSXML2.XMLHTTP"); // ...IE特有的上传逻辑 } catch (e) { alert("请启用ActiveX控件"); } } else if (navigator.mimeTypes["application/x-shockwave-flash"] != undefined) { // 使用Flash上传 var swf = '<object type="application/x-shockwave-flash" data="upload.swf">'; document.getElementById('uploader').innerHTML = swf; } else { alert("请升级浏览器或安装Flash插件"); } }

注意：Flash方案需要额外开发Flash上传组件，且需要用户安装Flash插件，这在今天已经不太现实。对于必须支持IE8的项目，建议与客户沟通升级浏览器。

2.2 后端实现方案（JSP/Servlet）

2.2.1 分片接收与存储

@WebServlet("/upload") public class UploadServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取分片信息 int chunkNumber = Integer.parseInt(request.getParameter("chunkNumber")); int totalChunks = Integer.parseInt(request.getParameter("totalChunks")); String fileMd5 = request.getParameter("fileMd5"); // 创建临时目录 String tempDir = getServletContext().getRealPath("/upload/temp/" + fileMd5); new File(tempDir).mkdirs(); // 保存分片 Part filePart = request.getPart("file"); String chunkPath = tempDir + "/" + chunkNumber; filePart.write(chunkPath); // 检查是否全部上传完成 File[] chunks = new File(tempDir).listFiles(); if (chunks.length == totalChunks) { // 合并文件 mergeFiles(tempDir, getServletContext().getRealPath("/upload/" + fileMd5)); deleteDirectory(tempDir); response.getWriter().write("{\"status\":\"complete\"}"); } else { response.getWriter().write("{\"status\":\"partial\",\"uploaded\":"+chunks.length+"}"); } } private void mergeFiles(String tempDir, String destPath) throws IOException { FileOutputStream fos = new FileOutputStream(destPath); File[] chunks = new File(tempDir).listFiles(); // 按分片编号排序 Arrays.sort(chunks, Comparator.comparingInt(f -> Integer.parseInt(f.getName()))); for (File chunk : chunks) { Files.copy(chunk.toPath(), fos); chunk.delete(); } fos.close(); } }

2.2.2 断点续传实现

要实现断点续传，后端需要记录每个文件的上传进度：

// 在UploadServlet中添加 private Map<String, Set<Integer>> uploadProgress = new ConcurrentHashMap<>(); protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String fileMd5 = request.getParameter("fileMd5"); String tempDir = getServletContext().getRealPath("/upload/temp/" + fileMd5); File dir = new File(tempDir); if (dir.exists()) { Set<Integer> uploaded = Arrays.stream(dir.listFiles()) .map(f -> Integer.parseInt(f.getName())) .collect(Collectors.toSet()); response.setContentType("application/json"); response.getWriter().write(new Gson().toJson(uploaded)); } else { response.getWriter().write("[]"); } }

前端在开始上传前可以先查询已上传的分片：

async function checkUploadProgress(fileMd5) { const response = await fetch(`/upload?fileMd5=${fileMd5}`); const uploadedChunks = await response.json(); return new Set(uploadedChunks); }

3. 高级功能实现

3.1 秒传功能

秒传是通过文件内容哈希值判断文件是否已存在服务器，避免重复上传：

// 计算文件MD5（前端） function calculateMD5(file) { return new Promise((resolve) => { const chunkSize = 2 * 1024 * 1024; // 2MB const chunks = Math.ceil(file.size / chunkSize); const spark = new SparkMD5.ArrayBuffer(); const fileReader = new FileReader(); let currentChunk = 0; fileReader.onload = function(e) { spark.append(e.target.result); currentChunk++; if (currentChunk < chunks) { loadNext(); } else { resolve(spark.end()); } }; function loadNext() { const start = currentChunk * chunkSize; const end = Math.min(start + chunkSize, file.size); fileReader.readAsArrayBuffer(file.slice(start, end)); } loadNext(); }); } // 后端检查接口 @WebServlet("/checkFile") public class CheckFileServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String fileMd5 = request.getParameter("md5"); File file = new File(getServletContext().getRealPath("/upload/" + fileMd5)); response.setContentType("application/json"); if (file.exists()) { response.getWriter().write("{\"exists\":true,\"path\":\""+file.getName()+"\"}"); } else { response.getWriter().write("{\"exists\":false}"); } } }

3.2 文件夹上传

HTML5提供了webkitRelativePath属性获取文件夹结构：

document.getElementById('folderInput').addEventListener('change', function(e) { const files = Array.from(e.target.files); const folderStructure = {}; files.forEach(file => { const path = file.webkitRelativePath; const parts = path.split('/'); let current = folderStructure; // 构建文件夹树 for (let i = 0; i < parts.length - 1; i++) { const part = parts[i]; if (!current[part]) { current[part] = {}; } current = current[part]; } // 添加文件 current[parts[parts.length - 1]] = file; }); // 上传文件夹结构 uploadFolder(folderStructure); });

3.3 加密传输

对于敏感文件，可以在前端进行加密后再上传：

// 使用CryptoJS进行AES加密 function encryptChunk(chunk, key) { const wordArray = CryptoJS.lib.WordArray.create(chunk); const encrypted = CryptoJS.AES.encrypt(wordArray, key); return encrypted.toString(); } // 解密示例 function decryptData(encrypted, key) { const decrypted = CryptoJS.AES.decrypt(encrypted, key); return decrypted.toString(CryptoJS.enc.Utf8); }

4. 性能优化与问题排查

4.1 上传速度优化

1. 并行上传：同时上传多个分片

   // 使用Promise.all并行上传多个分片 const parallel = 3; // 并行数 for (let i = 0; i < totalChunks; i += parallel) { const chunkPromises = []; for (let j = 0; j < parallel && (i + j) < totalChunks; j++) { chunkPromises.push(uploadChunk(i + j)); } await Promise.all(chunkPromises); }

2. 动态分片大小：根据网络状况调整分片大小

   let chunkSize = 1 * 1024 * 1024; // 初始1MB function adjustChunkSize(uploadSpeed) { if (uploadSpeed > 1024 * 1024) { // 1MB/s以上 chunkSize = 5 * 1024 * 1024; } else if (uploadSpeed > 512 * 1024) { // 512KB/s以上 chunkSize = 2 * 1024 * 1024; } else { chunkSize = 512 * 1024; } }

4.2 常见问题排查

1. 分片合并失败：

   • 检查临时目录权限
   • 确保分片按顺序合并
   • 验证合并后的文件大小是否与原始文件一致

2. 内存泄漏：

   • 及时释放已上传分片的内存
   • 避免在前端同时保存过多分片数据

3. IE8特殊问题：

   • ActiveX安全设置可能导致上传组件无法加载
   • Flash版本兼容性问题
   • 最大上传文件大小限制（通常2GB）

5. 实际部署建议

5.1 服务器配置调整

对于Tomcat服务器，需要调整以下参数：

1. maxPostSize：在server.xml中设置

   <Connector port="8080" protocol="HTTP/1.1" maxPostSize="0" <!-- 0表示不限制 --> connectionTimeout="20000" />

2. 文件保存位置：建议使用独立存储卷

   String storagePath = "/data/uploads/"; // 而不是放在webapp目录下

5.2 数据库设计

如果需要记录上传历史，可以设计如下表结构：

CREATE TABLE file_uploads ( id VARCHAR(32) PRIMARY KEY, file_name VARCHAR(255), file_path VARCHAR(512), file_size BIGINT, file_md5 VARCHAR(32), upload_status ENUM('uploading','completed','failed'), created_at DATETIME, completed_at DATETIME, user_id INT ); CREATE TABLE file_chunks ( id INT AUTO_INCREMENT PRIMARY KEY, file_id VARCHAR(32), chunk_number INT, chunk_size INT, chunk_md5 VARCHAR(32), upload_time DATETIME, FOREIGN KEY (file_id) REFERENCES file_uploads(id) );

5.3 安全注意事项

1. 文件类型检查：不要仅依赖前端验证

   boolean isSafeFile(String filename) { String[] allowedExtensions = {".jpg", ".png", ".pdf", ".docx"}; String lowerName = filename.toLowerCase(); return Arrays.stream(allowedExtensions).anyMatch(lowerName::endsWith); }

2. 病毒扫描：集成ClamAV等杀毒软件

   ProcessBuilder pb = new ProcessBuilder("clamscan", uploadedFilePath); Process p = pb.start(); int exitCode = p.waitFor(); if (exitCode == 1) { // 发现病毒 new File(uploadedFilePath).delete(); }

3. 权限控制：确保用户只能访问自己的文件

   @WebServlet("/download") public class DownloadServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String fileId = request.getParameter("id"); // 验证用户权限 if (!checkPermission(request.getSession(), fileId)) { response.sendError(403); return; } // 允许下载 } }

6. 替代方案与工具推荐

如果项目允许使用第三方解决方案，以下工具值得考虑：

1. Resumable.js：强大的分块上传库
2. Uppy：现代文件上传组件，支持多种后端
3. Tus协议：基于HTTP的可恢复文件上传协议
4. WebSocket上传：适合不稳定网络环境

对于Java后端，可以考虑：

1. Apache Commons FileUpload：处理multipart请求
2. Spring Content：Spring生态的文件管理模块
3. MinIO：兼容S3协议的对象存储服务

7. 项目实战经验分享

在实现大文件上传功能时，我总结出以下几点经验：

1. 分片大小选择：通常2-5MB比较合适，太小会增加请求次数，太大会增加失败重试成本

2. 进度显示技巧：

   • 前端计算总体进度时，应考虑已确认的分片和正在上传的分片
   • 使用Web Worker处理大文件哈希计算，避免界面卡顿

3. IE兼容的妥协方案：

   • 对于必须支持IE8的项目，可以提供单独的简单上传页面
   • 限制IE8用户的最大上传文件大小（如500MB）

4. 测试要点：

   • 模拟网络中断测试断点续传
   • 测试不同文件类型（特别是大视频文件）
   • 测试并发上传场景

5. 性能监控：

   // 记录上传耗时 long startTime = System.currentTimeMillis(); // ...上传逻辑... long duration = System.currentTimeMillis() - startTime; logger.info("文件{}上传耗时：{}ms，平均速度：{}KB/s", fileMd5, duration, (fileSize/1024)/(duration/1000));

最后，对于"100元预算实现20G上传"这种需求，我的建议是：

1. 与客户明确技术限制和成本关系
2. 提供分阶段实施方案（先实现基本功能，再逐步优化）
3. 考虑使用现成的云存储解决方案（如七牛云、阿里云OSS）
4. 对于实在不合理的需求，学会礼貌地说"不"