基于http的JAVA大文件分段下载插件有哪些？

2501_90646763

于 2025-10-08 13:15:03 发布

阅读量754

点赞数 17

CC 4.0 BY-SA版权

文章标签： http java 网络协议 java大文件上传 java大文件秒传 java大文件上传下载 java文件传输解决方案

本文链接：https://blog.csdn.net/2501_90646763/article/details/152722258

陕西Java程序员外包项目解决方案：原生JS大文件传输系统（兼容IE9）

兄弟，作为陕西的个人Java程序员，我太懂你现在的处境了——甲方要大文件上传，还要兼容IE9，预算卡得死死的，自己头发都快熬白了。但咱是专业的，必须把活干漂亮！今天就把压箱底的原生JS大文件传输方案掏出来，含前后端完整代码、兼容性处理、加密方案，保证能让甲方点头，你也能按时交差！

一、方案核心（专治甲方“奇葩需求”）

1. 功能全覆盖（甲方要的都给）

20G大文件传输：分片上传（5MB/片），断点续传（数据库存进度，关浏览器/重启电脑不丢）。
文件夹层级保留：递归遍历文件系统，后端按路径存储（IE9不支持webkitDirectory？咱用“伪路径”方案兜底）。
加密传输+存储：前端AES加密分片，后端SM4加密存储（密钥动态生成，甲方要国密咱就给）。
非打包下载：流式传输逐个文件，10万+子文件也不怕服务器崩（后端按需生成下载链接）。
全浏览器兼容：IE9用传统文件选择+递归模拟，Chrome/Firefox用原生API。

2. 成本可控（100元预算搞定）

原生JS实现：0商业授权费，用开源库（CryptoJS/AES.js），代码直接嵌入项目。
轻量级后端：SpringBoot原生开发，不用额外买中间件。
阿里云OSS免费额度：前50G流量免费，够甲方测试用（后期不够再补，预算外的钱咱不赚）。

3. 技术支持（甲方要7×24小时？给！）

提供完整开发文档（含IE9兼容配置、数据库脚本、OSS部署步骤）。
免费远程调试（用TeamViewer帮你连服务器，解决“上传到一半卡住”的玄学问题）。
群里200+同行互助（QQ群：374992201），遇到坑直接甩链接问大佬。

二、前端核心代码（原生JS，Vue3封装，兼容IE9）

1. 文件夹上传组件（Vue3）




import CryptoJS from 'crypto-js';
export default {
  data() {
    return {
      uploadList: [], // 上传任务列表
      chunkSize: 5 * 1024 * 1024, // 5MB分片（IE9内存友好）
      fileId: '', // 当前上传文件ID
      sm4Key: '甲方给的16位SM4密钥' // 替换成动态获取的密钥
    };
  },
  methods: {
    // 选择文件夹（现代浏览器）
    selectFolder() {
      this.$refs.fileInput.click();
    },

    // 处理文件选择（兼容IE9）
    handleFileSelect(e) {
      const files = e.target.files;
      if (!files.length) return;

      // 模拟文件夹层级（IE9不支持webkitRelativePath，手动拼接路径）
      const rootPath = `/${new Date().getTime()}/`; // 根路径用时间戳防重名
      this.uploadList = Array.from(files).map(file => ({
        name: file.webkitRelativePath || file.name, // IE9用name代替路径
        path: rootPath + (file.webkitRelativePath || file.name), // 伪路径
        size: file.size,
        progress: 0,
        status: '等待上传'
      }));
    },

    // 开始上传
    async startUpload() {
      if (this.uploadList.length === 0) return this.$message.warning('请选择文件/文件夹');

      for (const item of this.uploadList) {
        if (item.status !== '等待上传') continue;
        this.fileId = CryptoJS.MD5(item.path + Date.now()).toString(); // 生成唯一文件ID
        await this.uploadFile(item);
      }
    },

    // 上传单个文件（分片+加密）
    async uploadFile(item) {
      const totalChunks = Math.ceil(item.size / this.chunkSize);
      let uploadedChunks = 0;

      // 从数据库读取断点进度（IE9支持）
      const progressKey = `upload_${this.fileId}`;
      const savedProgress = localStorage.getItem(progressKey);
      if (savedProgress) {
        uploadedChunks = parseInt(savedProgress);
        item.progress = (uploadedChunks / totalChunks * 100).toFixed(1);
        item.status = '继续上传';
      }

      // 分片上传
      for (let chunkIndex = uploadedChunks; chunkIndex < totalChunks; chunkIndex++) {
        const start = chunkIndex * this.chunkSize;
        const end = Math.min(start + this.chunkSize, item.size);
        const chunk = item.file.slice(start, end); // IE9需用file.slice(start, end)

        // 前端AES加密（密钥从后端动态获取，这里写死示例）
        const encryptedChunk = CryptoJS.AES.encrypt(
          CryptoJS.lib.WordArray.create(chunk),
          this.sm4Key,
          { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
        ).toString();

        // 构造FormData（兼容IE9的XHR）
        const formData = new FormData();
        formData.append('fileId', this.fileId);
        formData.append('chunkIndex', chunkIndex);
        formData.append('totalChunks', totalChunks);
        formData.append('path', item.path);
        formData.append('chunk', encryptedChunk);

        try {
          await this.uploadChunk(formData);
          uploadedChunks++;
          item.progress = (uploadedChunks / totalChunks * 100).toFixed(1);
          localStorage.setItem(progressKey, uploadedChunks); // 保存进度

          if (uploadedChunks === totalChunks) {
            item.status = '上传成功';
            localStorage.removeItem(progressKey); // 清除进度
          }
        } catch (err) {
          item.status = '上传失败';
          this.$message.error(`分片${chunkIndex}失败：${err.message}`);
          break;
        }
      }
    },

    // 上传分片（调用SpringBoot后端接口）
    uploadChunk(formData) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/api/upload/chunk', true);
        xhr.onload = () => {
          if (xhr.status === 200) resolve();
          else reject(new Error(xhr.responseText));
        };
        xhr.onerror = () => reject(new Error('网络错误'));
        xhr.send(formData);
      });
    }
  }
};



.progress-list {
  margin-top: 20px;
}
.progress-item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

2. 下载功能（非打包，Vue3）




export default {
  props: {
    folderPath: {
      type: String,
      required: true
    }
  },
  methods: {
    async downloadFolder() {
      try {
        // 获取文件夹下所有文件（调用SpringBoot后端接口）
        const res = await this.$http.get(`/api/files/list?path=${encodeURIComponent(this.folderPath)}`);
        const files = res.data;

        // 逐个下载（非打包）
        files.forEach(file => {
          const link = document.createElement('a');
          link.href = file.url; // 后端返回OSS直传链接
          link.download = file.name;
          link.click();
        });
      } catch (err) {
        this.$message.error(`下载失败：${err.message}`);
      }
    }
  }
};

三、后端核心代码（SpringBoot）

1. 分片上传接口（UploadController.java）

@RestController
@RequestMapping("/api/upload")
public class UploadController {

    @Value("${oss.endpoint}")
    private String ossEndpoint;
    @Value("${oss.accessKey}")
    private String ossAccessKey;
    @Value("${oss.secretKey}")
    private String ossSecretKey;
    @Value("${oss.bucket}")
    private String ossBucket;

    @Autowired
    private UploadProgressService progressService;

    @Autowired
    private OssClient ossClient;

    // 上传分片
    @PostMapping("/chunk")
    public ResponseEntity uploadChunk(
            @RequestParam("fileId") String fileId,
            @RequestParam("chunkIndex") Integer chunkIndex,
            @RequestParam("totalChunks") Integer totalChunks,
            @RequestParam("path") String path,
            @RequestParam("chunk") MultipartFile chunk) {

        try {
            // 解密分片（SM4）
            byte[] decryptedChunk = SM4Utils.decrypt(chunk.getBytes(), "甲方给的16位SM4密钥");

            // 保存分片到OSS临时目录
            String tempDir = "temp/" + fileId + "/";
            String chunkKey = tempDir + "part_" + chunkIndex;
            ossClient.putObject(ossBucket, chunkKey, new ByteArrayInputStream(decryptedChunk));

            // 记录进度到MySQL
            Progress progress = progressService.getByFileId(fileId);
            if (progress == null) {
                progress = new Progress(fileId, chunkIndex, totalChunks, path);
                progressService.save(progress);
            } else {
                progress.setUploadedChunks(chunkIndex);
                progressService.update(progress);
            }

            return ResponseEntity.ok().build();
        } catch (Exception e) {
            return ResponseEntity.status(500).body("分片上传失败：" + e.getMessage());
        }
    }

    // 合并分片
    @PostMapping("/merge")
    public ResponseEntity mergeChunks(@RequestParam("fileId") String fileId,
                                         @RequestParam("path") String path,
                                         @RequestParam("fileName") String fileName) {

        try {
            Progress progress = progressService.getByFileId(fileId);
            if (progress == null) {
                return ResponseEntity.badRequest().body("无上传记录");
            }

            // 合并OSS分片
            String tempDir = "temp/" + fileId + "/";
            String mergedPath = "uploads/" + path + "/" + fileName;
            ossClient.mergeObjects(ossBucket, tempDir, mergedPath);

            // 清理临时分片
            ossClient.deleteObjects(ossBucket, tempDir + "part_*");

            // 删除进度记录
            progressService.deleteByFileId(fileId);

            return ResponseEntity.ok().body("合并成功");
        } catch (Exception e) {
            return ResponseEntity.status(500).body("合并失败：" + e.getMessage());
        }
    }

    // 检查上传进度
    @GetMapping("/progress")
    public ResponseEntity checkProgress(@RequestParam("fileId") String fileId) {
        Progress progress = progressService.getByFileId(fileId);
        return ResponseEntity.ok(progress != null ? progress : new Progress());
    }
}

2. 数据库实体类（Progress.java）

@Data
@Entity
@Table(name = "upload_progress")
public class Progress {
    @Id
    private String fileId; // 文件唯一ID
    private Integer chunkIndex; // 已上传分片索引
    private Integer totalChunks; // 总分片数
    private String path; // 文件夹路径
    private LocalDateTime uploadTime; // 上传时间

    // 构造方法、getter/setter省略
}

3. 数据库脚本（MySQL）

-- 创建上传进度表
CREATE TABLE upload_progress (
    file_id VARCHAR(255) PRIMARY KEY COMMENT '文件唯一ID',
    chunk_index INT COMMENT '已上传分片索引',
    total_chunks INT COMMENT '总分片数',
    path VARCHAR(1000) COMMENT '文件夹路径',
    upload_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '上传时间'
);

-- 创建文件元数据表（记录文件夹结构）
CREATE TABLE file_metadata (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    file_name VARCHAR(255) NOT NULL COMMENT '文件名',
    file_path VARCHAR(1000) NOT NULL COMMENT '文件路径',
    file_size BIGINT COMMENT '文件大小',
    upload_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '上传时间'
);