angular - 如何将视频文件作为 Angular 块上传（版本 8）

Question

我想使用带有aspnetcore Web API的角度HttpClient将大型视频文件作为块上传到服务器，因为我在使用多部分文件上传时遇到文件大小限制问题。

标签： angularasp.net-corefile-uploadchunks

Answer 1

以角度块视频文件的一种可能方法：

HTML 视图包含一个文件类型的输入，它component.ts在文件上传时触发一个函数。组件的功能应该验证文件类型是视频，然后将其分成小块。可以使用外部服务来管理每个块并将其发送到 API。然后后端应该负责接收每个块并将其合并到最终文件中。

这是一个简单的示例，说明了从 UI 到 API 的编程过程。脚本非常基本，但它们显示了流程。您应该实施文件验证、尝试/缓存和其他改进以使其安全。

组件.html

<input type="file" (change)="fileSelected($event)" />

组件.ts

async fileSelected(file) {
    const chunkSize = 40000;

    for( let offset = 0; offset < file.size; offset += chunkSize ){
        const chunk = file.slice( offset, offset + chunkSize );
        const apiResponse = await this.apiService.sendChunk( chunk, offset );
    }
}

服务.ts

sendChunk( chunk, offset ) {
   const APIurl = 'http://myapi.com';
   const data = {
       chunk: chunk,
       offset: offset
   };
   return this.http.post(APIurl, data);
}

带有附加实现的原生 javascript 的一些参考：link1和link2