JSP如何解决金融行业的大文件分块上传问题？

全武凌(荆门泽优)

于 2025-10-18 13:14:57 发布

阅读量492

点赞数 8

CC 4.0 BY-SA版权

文章标签： java 金融开发语言 java大文件上传 java大文件秒传 java大文件上传下载 java文件传输解决方案

本文链接：https://blog.csdn.net/alisky119/article/details/153520565

程序猿の毕业设计渡劫指南（附代码+求生攻略）

一、项目背景（哭唧唧版）

作为一只即将被学校"扫地出门"的计科狗，最近被毕业设计折磨得夜不能寐——导师甩下一句：“做个文件管理系统，要支持10G大文件上传+文件夹+断点续传+IE8兼容，否则别想毕业！”（说完就骑着共享单车溜了）

现在的情况是：

前端：Vue3 + 原生JS（要兼容到IE8，比让恐龙玩Switch还离谱）
后端：SpringBoot（跑在Tomcat 6.0上，比我家老古董电视还卡）
存储：直接塞服务器硬盘（导师说"云存储太贵，咱们穷苦大学生要艰苦奋斗"）
浏览器：从IE8到Chrome120全兼容（包括龙芯浏览器这种"国产神器"）

二、技术选型（妥协版）

上传组件：
- 现代浏览器：H5 File API + Web Workers（防卡死）
- IE8：WebUploader + Flash（没错，2023年还要写Flash代码）
- 最终方案：双引擎热切换（像混动车一样智能）
加密方案：
- 传输加密：AES-128（IE8用CryptoJS降级）
- 存储加密：SM4（信创浏览器强制要求）
- 密钥管理：用户密码+时间戳盐值（防止导师偷看我学习资料）
断点续传：
- 进度存储：localStorage（IE8用userData模拟）
- 服务端记录：MySQL+文件系统双保险（防止浏览器清空数据）

三、前端实现（Vue3 + 原生JS）

// FileUploader.vue（精简求生版）



export default {
  data() {
    return {
      progress: 0,
      isIE8: !!window.ActiveXObject || "ActiveXObject" in window,
      chunkSize: 5 * 1024 * 1024 // 5MB分片
    }
  },
  methods: {
    triggerUpload() {
      if (this.isIE8) {
        // 触发IE8上传（通过iframe通信）
        document.getElementById('ie8Uploader').contentWindow.startUpload();
      } else {
        // 现代浏览器直接触发
        document.getElementById('modernFileInput').click();
      }
    },

    // 现代浏览器文件处理
    handleModernFileChange(e) {
      const files = e.target.files;
      Array.from(files).forEach(file => {
        if (file.webkitRelativePath) {
          this.uploadFolder(file); // 文件夹上传
        } else {
          this.uploadFile(file);
        }
      });
    },

    // 文件分片上传（现代浏览器）
    async uploadFile(file) {
      const fileId = this.generateFileId(file);
      const totalChunks = Math.ceil(file.size / this.chunkSize);
      let uploadedChunks = this.getSavedProgress(fileId) || 0;

      for (let i = uploadedChunks; i < totalChunks; i++) {
        const start = i * this.chunkSize;
        const end = Math.min(start + this.chunkSize, file.size);
        const chunk = file.slice(start, end);
        
        // 加密分片（简化版）
        const encrypted = this.encryptData(chunk);
        
        const formData = new FormData();
        formData.append('file', encrypted);
        formData.append('fileId', fileId);
        formData.append('chunkIndex', i);
        formData.append('totalChunks', totalChunks);

        try {
          await fetch('/api/upload/chunk', {
            method: 'POST',
            body: formData
          });
          
          this.progress = Math.floor(((i + 1) / totalChunks) * 100);
          this.saveProgress(fileId, i + 1);
        } catch (e) {
          console.error('上传失败:', e);
          break;
        }
      }
    },

    // IE8兼容方案（伪代码）
    uploadFileIE8(file) {
      // 这里需要写100行ActiveXObject代码...
      // 核心思路：通过XMLHttpRequest分片上传
      // 省略IE8兼容代码（手酸了）...
    },

    // 生成唯一文件ID（兼容IE8）
    generateFileId(file) {
      if (this.isIE8) {
        return file.name + file.size + file.lastModified; // 简单拼接
      }
      return file.name + '-' + CryptoJS.MD5(file.name + file.size).toString();
    }
  }
}

四、后端实现（SpringBoot + Tomcat 6.0）

// FileUploadController.java（求生版）
@RestController
@RequestMapping("/api/upload")
public class FileUploadController {

    @Value("${file.upload-dir}")
    private String uploadDir;

    // 初始化上传任务
    @PostMapping("/init")
    public ResponseEntity> initUpload(
            @RequestParam String fileName,
            @RequestParam long fileSize) {

        String fileId = UUID.randomUUID().toString();
        String tempDir = uploadDir + "/temp/" + fileId;
        
        // 创建临时目录（Tomcat 6.0需要手动处理路径）
        new File(tempDir).mkdirs();

        Map response = new HashMap<>();
        response.put("fileId", fileId);
        response.put("chunkSize", 5242880); // 5MB
        response.put("uploadDir", tempDir);

        return ResponseEntity.ok(response);
    }

    // 处理分片上传
    @PostMapping("/chunk")
    public ResponseEntity uploadChunk(
            @RequestParam("file") MultipartFile file,
            @RequestParam String fileId,
            @RequestParam int chunkIndex,
            @RequestParam int totalChunks) {

        try {
            String tempDir = uploadDir + "/temp/" + fileId;
            String chunkPath = tempDir + "/" + chunkIndex;

            // 解密文件（简化版）
            byte[] decrypted = decrypt(file.getBytes());

            // 保存分片（Tomcat 6.0文件操作）
            Files.write(Paths.get(chunkPath), decrypted);

            // 如果是最后一个分片，合并文件
            if (chunkIndex == totalChunks - 1) {
                mergeFile(fileId, tempDir);
            }

            return ResponseEntity.ok().build();
        } catch (Exception e) {
            return ResponseEntity.status(500).build();
        }
    }

    // 合并文件（Tomcat 6.0兼容版）
    private void mergeFile(String fileId, String tempDir) throws IOException {
        File[] chunks = new File(tempDir).listFiles();
        if (chunks == null || chunks.length == 0) return;

        // 按分片序号排序
        Arrays.sort(chunks, Comparator.comparingInt(f -> {
            String name = f.getName();
            return Integer.parseInt(name);
        }));

        // 读取原始文件名（从第一个分片中获取）
        String fileName = "unknown"; // 实际应从数据库或第一个分片获取
        String outputPath = uploadDir + "/" + fileName;

        try (FileOutputStream fos = new FileOutputStream(outputPath)) {
            for (File chunk : chunks) {
                Files.copy(chunk.toPath(), fos);
                chunk.delete(); // 删除分片
            }
        }

        // 删除临时目录
        new File(tempDir).delete();
    }
}

五、IE8兼容血泪史（附解决方案）

文件夹上传：

现代浏览器：``
IE8：需要用ActiveXObject遍历文件系统（需要降低安全级别）

// IE8文件夹遍历（伪代码）
function browseFolderIE8(path) {
  try {
    const fso = new ActiveXObject("Scripting.FileSystemObject");
    const folder = fso.GetFolder(path);
    const files = new Enumerator(folder.files);
    
    for (; !files.atEnd(); files.moveNext()) {
      const file = files.item();
      // 递归处理子文件夹...
    }
  } catch (e) {
    alert("请降低IE安全级别！");
  }
}

localStorage替代方案：

// IE8的userData存储（古老的黑科技）
function saveToUserData(key, value) {
  const storage = document.createElement('div');
  storage.id = 'ie8Storage';
  storage.style.behavior = 'url(#default#userData)';
  document.body.appendChild(storage);
  
  storage.setAttribute(key, value);
  storage.save('fileUploadProgress');
  document.body.removeChild(storage);
}

XMLHttpRequest降级：

// IE8的XHR实现
function createIE8XHR() {
  try {
    return new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      return new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      alert("您的浏览器太古老了，请升级！");
      return null;
    }
  }
}