国产化系统下JavaScript大文件分片上传实战

1. 国产化系统与大文件上传的挑战

在国产化操作系统（如麒麟、统信UOS）环境下，JavaScript实现大文件分片上传需要考虑更多特殊因素。不同于常规Web环境，国产化平台通常采用定制化的浏览器内核和安全策略，这对文件操作API的兼容性提出了更高要求。

我曾在一个医疗影像云存储项目中，需要在统信UOS系统上实现超过2GB的DICOM文件上传。测试发现，直接使用标准File API会导致内存溢出，这正是分片上传技术要解决的核心问题。

2. 核心技术方案设计

2.1 分片上传原理

分片上传的本质是将大文件切割为多个小块（通常每片2-5MB），通过多个HTTP请求分别上传，最后在服务端合并。这种方案有三大优势：

1. 避免单次请求超时
2. 支持断点续传
3. 降低内存占用

在国产化环境中，需要特别注意：

javascript复制// 国产系统特有的文件读取方式
const fileReader = new FileReader();
fileReader.onload = (e) => {
  // 处理分片数据时需要考虑中文路径编码
  const slice = file.slice(start, end, "application/octet-stream");
};

2.2 关键实现步骤

1. 文件分片计算：

   javascript复制function calculateSlices(file, chunkSize = 5 * 1024 * 1024) {
     const chunks = Math.ceil(file.size / chunkSize);
     return Array(chunks).fill().map((_, i) => ({
       start: i * chunkSize,
       end: Math.min(file.size, (i + 1) * chunkSize)
     }));
   }
   

2. 国产化环境适配：

   • 使用Blob.prototype.slice而非已废弃的File.prototype.slice
   • 添加额外的MIME类型校验
   • 处理国产浏览器可能存在的ArrayBuffer转换问题

3. 完整实现方案

3.1 前端核心代码

javascript复制class ChunkUploader {
  constructor(file, options = {}) {
    this.file = file;
    this.chunkSize = options.chunkSize || 5 * 1024 * 1024;
    this.retries = options.retries || 3;
    this.concurrent = options.concurrent || 3;
  }

  async upload() {
    const chunks = this.calculateChunks();
    const queue = [];
    
    for (let i = 0; i < chunks.length; i++) {
      queue.push(this.uploadChunk(chunks[i], i));
      if (queue.length >= this.concurrent) {
        await Promise.race(queue);
      }
    }
    
    return Promise.all(queue);
  }

  async uploadChunk(chunk, index) {
    let retry = 0;
    while (retry < this.retries) {
      try {
        const formData = new FormData();
        formData.append('file', chunk.blob);
        formData.append('chunkIndex', index);
        formData.append('totalChunks', this.totalChunks);
        
        const response = await fetch('/upload', {
          method: 'POST',
          body: formData
        });
        
        if (!response.ok) throw new Error('Upload failed');
        return;
      } catch (err) {
        if (++retry >= this.retries) throw err;
      }
    }
  }
}

3.2 服务端(Node.js)示例

javascript复制const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();
const uploadDir = './uploads';

app.post('/upload', async (req, res) => {
  const { chunkIndex, totalChunks } = req.body;
  const chunk = req.files.file;
  
  // 国产系统路径处理
  const safeFilename = encodeURIComponent(req.body.filename);
  const chunkDir = path.join(uploadDir, safeFilename);
  
  if (!fs.existsSync(chunkDir)) {
    fs.mkdirSync(chunkDir, { recursive: true });
  }
  
  await fs.promises.writeFile(
    path.join(chunkDir, `${chunkIndex}.part`),
    chunk.data
  );
  
  res.json({ success: true });
});

app.post('/merge', async (req, res) => {
  const { filename } = req.body;
  const safeFilename = encodeURIComponent(filename);
  const chunkDir = path.join(uploadDir, safeFilename);
  
  const chunks = fs.readdirSync(chunkDir)
    .sort((a, b) => parseInt(a) - parseInt(b));
  
  const writeStream = fs.createWriteStream(
    path.join(uploadDir, safeFilename)
  );
  
  for (const chunk of chunks) {
    const chunkPath = path.join(chunkDir, chunk);
    writeStream.write(fs.readFileSync(chunkPath));
    fs.unlinkSync(chunkPath);
  }
  
  writeStream.end();
  res.json({ success: true });
});

4. 国产化环境特殊处理

4.1 浏览器兼容方案

在麒麟系统自带的浏览器中，可能需要添加这些polyfill：

javascript复制// 解决某些国产浏览器缺少的API
if (!Blob.prototype.slice) {
  Blob.prototype.slice = Blob.prototype.webkitSlice || Blob.prototype.mozSlice;
}

// 中文文件名处理
function safeFileName(filename) {
  return typeof filename === 'string' ? 
    encodeURIComponent(filename) : 
    `file_${Date.now()}`;
}

4.2 性能优化技巧

1. 内存管理：

   javascript复制// 释放已上传的分片内存
   function cleanupChunk(chunk) {
     if (chunk.blob && typeof chunk.blob.close === 'function') {
       chunk.blob.close();
     }
     chunk.blob = null;
   }
   

2. 上传进度计算：

   javascript复制const progress = chunks.reduce((total, chunk) => {
     return total + (chunk.uploaded ? chunk.size : 0);
   }, 0) / file.size * 100;
   

5. 安全与稳定性保障

5.1 安全措施

1. 服务端校验每个分片的MD5
2. 限制单个文件最大分片数（如500片）
3. 上传令牌时效控制

5.2 断点续传实现

javascript复制// 初始化时检查已上传分片
async function initUpload(file) {
  const response = await fetch(`/upload-status?file=${encodeURIComponent(file.name)}`);
  const { uploadedChunks } = await response.json();
  
  return chunks.map((chunk, index) => ({
    ...chunk,
    uploaded: uploadedChunks.includes(index)
  }));
}

6. 实测数据对比

在统信UOS环境下测试1GB文件上传：

7. 常见问题解决

问题1：国产浏览器报错"FileReader not defined"

javascript复制// 解决方案：添加polyfill
if (typeof FileReader === 'undefined') {
  window.FileReader = function() {
    // 实现基础功能...
  };
}

问题2：分片上传后合并失败

• 检查服务端临时目录权限
• 验证分片序号是否连续
• 确保所有分片使用相同的文件名编码

问题3：上传速度慢

• 调整并发数（通常3-5个最佳）
• 禁用国产浏览器的安全扫描功能
• 使用WebSocket替代HTTP（需服务端支持）

这个方案已在多个国产化医疗系统中稳定运行，包括处理超过10GB的医学影像文件。关键点在于分片大小的动态调整——我们最终采用首片1MB测试网络状况，后续分片根据测速结果动态调整为2-10MB，这样在保证稳定性的同时最大化传输速度。