Angular 5中能否实现视频文件分块上传？求可行解决方案

当然可以在Angular 5里实现分块上传，完全能解决你现在把整个视频加载到内存再处理的问题，尤其适合大文件场景。下面分享几个可行的方案：

一、基于原生File API + Angular HttpClient手动实现 #

这是最灵活的方式，完全可控，不需要依赖第三方库：

1. 分割文件为块：利用File对象的slice()方法把大文件切成指定大小的块（比如每块10MB）
2. 逐个上传块：通过Angular的HttpClient逐个发送块请求，每个请求带上必要的标识（比如文件唯一ID、当前块序号、总块数），方便后端拼接
3. 处理上传进度与重试：利用HttpClient的reportProgress选项监听上传进度，遇到失败可以针对单个块重试

示例代码片段：

import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';

// 假设你已经获取到了用户选择的File对象
uploadLargeFile(file: File) {
  const chunkSize = 10 * 1024 * 1024; // 10MB每块
  const totalChunks = Math.ceil(file.size / chunkSize);
  const fileId = Math.random().toString(36).substring(2); // 生成唯一文件ID

  for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
    const start = chunkIndex * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('fileChunk', chunk);
    formData.append('fileId', fileId);
    formData.append('chunkIndex', chunkIndex.toString());
    formData.append('totalChunks', totalChunks.toString());
    formData.append('fileName', file.name);

    const req = new HttpRequest('POST', '/api/upload/chunk', formData, {
      reportProgress: true,
      responseType: 'json'
    });

    this.httpClient.request(req).subscribe(
      (event: HttpEvent<any>) => {
        if (event.type === HttpEventType.UploadProgress) {
          const percentDone = Math.round(100 * event.loaded / event.total);
          console.log(`块 ${chunkIndex+1}/${totalChunks} 上传进度: ${percentDone}%`);
        } else if (event.type === HttpEventType.Response) {
          console.log(`块 ${chunkIndex+1} 上传完成`);
          // 所有块上传完成后，可以通知后端合并文件
          if (chunkIndex === totalChunks - 1) {
            this.httpClient.post('/api/upload/merge', { fileId, fileName: file.name }).subscribe(res => {
              console.log('文件合并完成');
            });
          }
        }
      },
      error => {
        console.error(`块 ${chunkIndex+1} 上传失败，可重试`, error);
        // 这里可以添加重试逻辑
      }
    );
  }
}

二、使用第三方上传库简化实现 #

如果你不想手动写分块逻辑，可以用适配Angular 5的第三方上传库，这些库已经封装好了分块上传、进度监听、断点续传等功能，只需要简单配置即可：

以ng2-file-upload为例（适配Angular 5版本）：

1. 安装对应版本的库：npm install ng2-file-upload@^1.3.0 --save
2. 在模块中导入FileUploadModule
3. 配置上传选项时开启分块：

import { FileUploader } from 'ng2-file-upload';

uploader: FileUploader = new FileUploader({
  url: '/api/upload/chunk',
  method: 'POST',
  itemAlias: 'file',
  chunkSize: 10 * 1024 * 1024, // 每块大小
  headers: [{ name: 'Accept', value: 'application/json' }]
});

// 监听上传状态
this.uploader.onProgressItem = (fileItem, progress) => {
  console.log(`${fileItem.file.name} 上传进度: ${progress}%`);
};

this.uploader.onSuccessItem = (item, response, status, headers) => {
  console.log('块上传成功');
};

关键注意事项 #

• 后端配合：不管用哪种方式，后端都需要支持接收分块、存储块，最后合并成完整文件，还要处理重复上传的块（通过fileId和chunkIndex去重）
• 断点续传：如果需要断点续传，前端要能记录已上传的块，下次上传时先请求后端查询已上传的块，跳过这些块直接传剩下的
• 内存优化：分块上传时每次只加载一个块到内存，大大减少了内存占用，这正是你需要的效果

内容的提问来源于stack exchange，提问作者user3799793