企业官网建设流程全解析

大文件上传系统开发指南（基于原生JS+SpringBoot）

项目概述

大家好，我是一个陕西的Java程序员，最近接了个"刺激"的外包项目 - 要开发一个支持20G文件上传下载的系统，还得兼容IE9这种古董浏览器。客户要求用原生JS实现（不能借jQuery的力），还要支持文件夹上传、加密传输、断点续传等高级功能。预算只有100元？没问题，咱们程序员最擅长的就是用爱发电！

技术选型分析

经过深思熟虑（和几根头发的牺牲），我决定采用以下技术方案：

1. 前端：Vue3 CLI + 原生JS实现WebUploader功能（兼容IE9）
2. 后端：SpringBoot + 阿里云OSS
3. 数据库：MySQL（主要存用户信息和文件元数据）
4. 加密：前端SM4（国密） + 后端AES双重加密
5. 断点续传：基于文件分片和本地存储记录

前端实现（Vue3 + 原生JS）

1. 兼容IE9的文件夹上传组件

export default { name: 'FileUploader', data() { return { fileList: [], chunkSize: 5 * 1024 * 1024, // 5MB分片 concurrent: 3 // 并发上传数 } }, methods: { triggerFileInput() { document.getElementById('fileInput').click(); }, handleFileChange(e) { const files = e.target.files; if (!files.length) return; // 处理文件夹结构 const fileTree = this.buildFileTree(files); this.prepareUpload(fileTree); }, // 构建文件树结构（保留文件夹层级） buildFileTree(files) { const tree = {}; for (let i = 0; i < files.length; i++) { const file = files[i]; const path = file.webkitRelativePath || file.relativePath || file.name; const parts = path.split('/'); let currentLevel = tree; for (let j = 0; j < parts.length - 1; j++) { const dir = parts[j]; if (!currentLevel[dir]) { currentLevel[dir] = { __files__: [] }; } currentLevel = currentLevel[dir]; } // 添加文件信息 currentLevel.__files__.push({ file: file, relativePath: path, size: file.size, loaded: 0, progress: 0, chunks: Math.ceil(file.size / this.chunkSize), uploadedChunks: 0 }); } return tree; }, // 准备上传队列 prepareUpload(fileTree) { const flattenFiles = []; // 扁平化文件树（保留路径信息） const traverse = (node, parentPath = '') => { for (const key in node) { if (key === '__files__') { node[key].forEach(fileItem => { flattenFiles.push({ ...fileItem, relativePath: parentPath ? `${parentPath}/${fileItem.relativePath}` : fileItem.relativePath }); }); } else { const newPath = parentPath ? `${parentPath}/${key}` : key; traverse(node[key], newPath); } } }; traverse(fileTree); this.fileList = flattenFiles; // 开始上传 this.startUpload(); }, // 开始上传（带并发控制） startUpload() { let activeUploads = 0; const uploadNext = () => { if (activeUploads >= this.concurrent) return; const fileItem = this.fileList.find(f => f.progress < 100); if (!fileItem) { if (activeUploads === 0) { this.$emit('upload-complete'); } return; } activeUploads++; this.uploadFile(fileItem).finally(() => { activeUploads--; uploadNext(); }); // 立即检查下一个 uploadNext(); }; // 初始启动 for (let i = 0; i < this.concurrent; i++) { uploadNext(); } }, // 分片上传文件 async uploadFile(fileItem) { const file = fileItem.file; const totalChunks = Math.ceil(file.size / this.chunkSize); // 检查断点续传信息 const uploadInfo = this.getUploadInfo(fileItem.relativePath); let startChunk = uploadInfo ? uploadInfo.uploadedChunks : 0; for (let i = startChunk; i < totalChunks; i++) { const start = i * this.chunkSize; const end = Math.min(start + this.chunkSize, file.size); const chunk = file.slice(start, end); // 读取分片内容（兼容IE9） const chunkData = await this.readFileAsArrayBuffer(chunk); // SM4加密（前端加密） const encryptedChunk = this.sm4Encrypt(chunkData); // 上传分片 const formData = new FormData(); formData.append('file', new Blob([encryptedChunk]), file.name); formData.append('chunkIndex', i); formData.append('totalChunks', totalChunks); formData.append('relativePath', fileItem.relativePath); formData.append('fileSize', file.size); formData.append('fileMd5', await this.calculateMD5(chunk)); try { const response = await fetch('/api/upload/chunk', { method: 'POST', body: formData }); if (!response.ok) throw new Error('Upload failed'); // 更新进度 fileItem.uploadedChunks = i + 1; fileItem.loaded = end; fileItem.progress = Math.round((fileItem.uploadedChunks / totalChunks) * 100); // 保存上传进度（使用localStorage） this.saveUploadInfo(fileItem.relativePath, { uploadedChunks: fileItem.uploadedChunks, totalChunks: totalChunks, fileSize: file.size }); this.$forceUpdate(); } catch (error) { console.error('Chunk upload failed:', error); // 失败后重试当前分片 i--; await new Promise(resolve => setTimeout(resolve, 1000)); } } // 所有分片上传完成，通知合并 if (fileItem.uploadedChunks === totalChunks) { await fetch('/api/upload/merge', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ relativePath: fileItem.relativePath, fileSize: file.size, totalChunks: totalChunks }) }); // 清除本地存储的上传信息 this.clearUploadInfo(fileItem.relativePath); } }, // 兼容IE9的文件读取方法 readFileAsArrayBuffer(file) { return new Promise((resolve, reject) => { if (typeof FileReader === 'undefined') { // IE9 fallback const reader = new ActiveXObject("Scripting.FileSystemObject"); const stream = new ActiveXObject("ADODB.Stream"); stream.Type = 1; // binary stream.Open(); stream.LoadFromFile(file); const arrayBuffer = stream.Read(); stream.Close(); resolve(arrayBuffer); } else { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsArrayBuffer(file); } }); }, // 简化的SM4加密（实际项目中应该使用成熟的加密库） sm4Encrypt(data) { // 这里应该是真正的SM4加密实现 // 为了示例，我们只是返回原始数据（实际项目中不要这样做！） console.warn('实际项目中请替换为真正的SM4加密实现'); return data; }, // 计算MD5（用于分片校验） calculateMD5(file) { return new Promise((resolve) => { // 实际项目中应该使用真正的MD5计算 // 这里简化为固定值（实际项目中不要这样做！） resolve('dummy-md5-hash'); }); }, // 断点续传相关方法（使用localStorage） getUploadInfo(relativePath) { const key = `upload_progress_${relativePath}`; const data = localStorage.getItem(key); return data ? JSON.parse(data) : null; }, } }

后端实现（SpringBoot）

1. 文件上传控制器

@RestController@RequestMapping("/api/upload")publicclassFileUploadController{@AutowiredprivateFileChunkServicefileChunkService;@AutowiredprivateOSSClientossClient;@Value("${oss.bucketName}")privateStringbucketName;// 上传分片@PostMapping("/chunk")publicResponseEntityuploadChunk(@RequestParam("file")MultipartFilefile,@RequestParam("chunkIndex")intchunkIndex,@RequestParam("totalChunks")inttotalChunks,@RequestParam("relativePath")StringrelativePath,@RequestParam("fileSize")longfileSize,@RequestParam("fileMd5")StringfileMd5){try{// AES解密（后端解密）byte[]decryptedBytes=AesUtil.decrypt(file.getBytes(),"your-secret-key-123");// 保存分片到临时目录StringtempDir=System.getProperty("java.io.tmpdir")+"/upload_chunks/"+fileMd5;FilechunkFile=newFile(tempDir+"/"+chunkIndex);Files.createParentDirs(chunkFile);Files.write(decryptedBytes,chunkFile);// 记录分片信息到数据库FileChunkchunk=newFileChunk();chunk.setFileMd5(fileMd5);chunk.setChunkIndex(chunkIndex);chunk.setTotalChunks(totalChunks);chunk.setRelativePath(relativePath);chunk.setFileSize(fileSize);chunk.setUploadTime(newDate());fileChunkService.save(chunk);returnResponseEntity.ok().build();}catch(Exceptione){returnResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(e.getMessage());}}// 合并分片@PostMapping("/merge")publicResponseEntitymergeChunks(@RequestBodyMergeRequestrequest){try{StringfileMd5=request.getFileMd5();StringtempDir=System.getProperty("java.io.tmpdir")+"/upload_chunks/"+fileMd5;// 检查所有分片是否已上传Listchunks=fileChunkService.findByFileMd5(fileMd5);if(chunks.size()!=request.getTotalChunks()){returnResponseEntity.badRequest().body("Not all chunks uploaded");}// 创建临时合并文件FilemergedFile=newFile(tempDir+"/merged_"+System.currentTimeMillis());try(FileOutputStreamfos=newFileOutputStream(mergedFile);BufferedOutputStreammergingStream=newBufferedOutputStream(fos)){// 按顺序合并分片for(inti=0;i<request.getTotalChunks();i++){FilechunkFile=newFile(tempDir+"/"+i);Files.copy(chunkFile,mergingStream);}}// 计算合并后文件的MD5（校验用）StringactualMd5=DigestUtils.md5DigestAsHex(newFileInputStream(mergedFile));if(!actualMd5.equals(fileMd5)){returnResponseEntity.badRequest().body("File MD5 mismatch");}// 上传到OSS（保留路径结构）StringossKey="uploads/"+request.getRelativePath();ossClient.putObject(bucketName,ossKey,mergedFile);// 保存文件元数据到数据库FileInfofileInfo=newFileInfo();fileInfo.setRelativePath(request.getRelativePath());fileInfo.setFileSize(request.getFileSize());fileInfo.setOssKey(ossKey);fileInfo.setUploadTime(newDate());fileInfo.setLastModified(newDate());fileInfoService.save(fileInfo);// 清理临时文件FileUtils.deleteDirectory(newFile(tempDir));returnResponseEntity.ok().build();}catch(Exceptione){returnResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(e.getMessage());}}}

2. 文件下载控制器

@RestController@RequestMapping("/api/download")publicclassFileDownloadController{@GetMapping("/info")publicResponseEntity>getFileInfo(@RequestParamStringpath){Listfiles=fileInfoService.findByPathPrefix(path);returnResponseEntity.ok(files.stream().map(this::convertToDTO).collect(Collectors.toList()));}// 分片下载文件（大文件支持）@GetMapping("/file")publicResponseEntitydownloadFile(@RequestParamStringossKey,@RequestParam(required=false)Longstart,@RequestParam(required=false)Longend){try{// 从OSS获取文件对象OSSObjectossObject=ossClient.getObject(bucketName,ossKey);// 如果请求了范围下载if(start!=null&&end!=null){InputStreaminputStream=ossObject.getObjectContent();longcontentLength=end-start+1;// 跳过前面的字节inputStream.skip(start);// 创建限制长度的输入流InputStreamlimitedStream=newLimitedInputStream(inputStream,contentLength);returnResponseEntity.ok().header(HttpHeaders.CONTENT_DISPOSITION,"attachment; filename=\""+URLEncoder.encode(ossKey.substring(ossKey.lastIndexOf('/')+1),"UTF-8")+"\"").header(HttpHeaders.CONTENT_RANGE,"bytes "+start+"-"+end+"/*").header(HttpHeaders.ACCEPT_RANGES,"bytes").contentType(MediaType.APPLICATION_OCTET_STREAM).contentLength(contentLength).body(newInputStreamResource(limitedStream));}else{// 完整文件下载returnResponseEntity.ok().header(HttpHeaders.CONTENT_DISPOSITION,"attachment; filename=\""+URLEncoder.encode(ossKey.substring(ossKey.lastIndexOf('/')+1),"UTF-8")+"\"").contentType(MediaType.APPLICATION_OCTET_STREAM).body(newInputStreamResource(ossObject.getObjectContent()));}}catch(Exceptione){returnResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();}}}

数据库设计

-- 文件信息表CREATETABLEfile_info(idBIGINTAUTO_INCREMENTPRIMARYKEY,relative_pathVARCHAR(1000)NOTNULLCOMMENT'文件相对路径（保留层级结构）',file_sizeBIGINTNOTNULLCOMMENT'文件大小（字节）',oss_keyVARCHAR(500)NOTNULLCOMMENT'OSS存储key',upload_timeDATETIMENOTNULLCOMMENT'上传时间',last_modifiedDATETIMENOTNULLCOMMENT'最后修改时间',UNIQUEKEYuk_relative_path(relative_path(255)))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;-- 文件分片表（用于断点续传）CREATETABLEfile_chunk(idBIGINTAUTO_INCREMENTPRIMARYKEY,file_md5VARCHAR(32)NOTNULLCOMMENT'文件MD5（作为唯一标识）',chunk_indexINTNOTNULLCOMMENT'分片索引',total_chunksINTNOTNULLCOMMENT'总分片数',relative_pathVARCHAR(1000)NOTNULLCOMMENT'文件相对路径',file_sizeBIGINTNOTNULLCOMMENT'文件总大小',upload_timeDATETIMENOTNULLCOMMENT'上传时间',INDEXidx_file_md5(file_md5))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;

项目部署说明

1. 前端部署：

   • 使用Vue CLI构建生产版本：npm run build
   • 将生成的dist目录内容部署到Nginx或Apache

2. 后端部署：

   • 使用Maven打包：mvn clean package
   • 生成JAR文件后上传到阿里云ECS
   • 使用java -jar命令运行，或配置为系统服务

3. Nginx配置示例（支持大文件上传）：

server { listen 80; server_name your-domain.com; client_max_body_size 102400m; # 100GB proxy_read_timeout 600s; proxy_send_timeout 600s; location / { root /path/to/frontend/dist; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

兼容性处理要点

1. IE9兼容性：

   • 使用ActiveXObject替代FileReader
   • 避免使用ES6+语法
   • 使用fetch的polyfill或改用XMLHttpRequest

2. 文件夹上传：

   • 利用webkitdirectory属性（Chrome等）
   • IE中使用``并手动解析路径

3. 加密处理：

   • 前端使用SM4（国密算法）加密
   • 后端使用AES二次加密
   • 提供加密开关配置

开发建议

1. 分阶段开发：

   • 第一阶段：实现基本文件上传下载
   • 第二阶段：添加文件夹支持
   • 第三阶段：实现断点续传
   • 第四阶段：添加加密功能

2. 测试要点：

   • 大文件上传（>5GB）
   • 网络中断后恢复上传
   • 文件夹层级结构验证
   • 跨浏览器兼容性测试

3. 性能优化：

   • 分片大小调整（5MB-10MB比较合适）
   • 并发上传数控制（3-5个并发）
   • 使用Web Worker处理加密计算

完整项目结构

large-file-upload/ ├── frontend/ # 前端Vue3项目 │ ├── src/ │ │ ├── components/ │ │ │ └── FileUploader.vue │ │ ├── App.vue │ │ └── main.js │ ├── public/ │ └── package.json ├── backend/ # 后端SpringBoot项目 │ ├── src/ │ │ ├── main/ │ │ │ ├── java/com/example/upload/ │ │ │ │ ├── controller/ │ │ │ │ ├── service/ │ │ │ │ ├── model/ │ │ │ │ └── Application.java │ │ │ └── resources/ │ │ │ ├── application.yml │ │ │ └── application-dev.yml │ └── pom.xml ├── docs/ # 开发文档 │ ├── api.md │ ├── deployment.md │ └── compatibility.md └── README.md

最后的话

兄弟，这个项目确实有点挑战性，特别是100元预算还要兼容IE9。不过咱们程序员不就是喜欢挑战吗？我建议：

1. 先实现核心功能（文件上传下载）
2. 再逐步添加高级功能
3. 重点测试断点续传和文件夹结构保留
4. 加密功能可以先用简化版，后续再完善

我已经提供了核心代码框架，你可以基于这个继续开发。如果遇到具体问题，欢迎加入我们的QQ群（374992201）交流，群里大佬众多，说不定能找到帮你调试的兄弟。

记住，咱们虽然预算有限，但志气不能限！用爱发电，照亮代码之路！💪🔥

导入项目

导入到Eclipse：点南查看教程
导入到IDEA：点击查看教程
springboot统一配置：点击查看教程

工程

NOSQL

NOSQL示例不需要任何配置，可以直接访问测试

创建数据表

选择对应的数据表脚本，这里以SQL为例

修改数据库连接信息

访问页面进行测试

文件存储路径

up6/upload/年/月/日/guid/filename

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

下载示例

点击下载完整示例