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

Question

我想使用 angular HttpClient 和 aspnetcore web API 将大型视频文件作为块上传到服务器，因为我在使用分段文件上传时遇到了文件大小限制问题。

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