angular - 如何将视频文件作为 Angular block 上传(版本 8)

Question

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

Answer 1

一种可能的方法来分 block 视频文件的 Angular :

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

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

component.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 );
    }
}

service.ts

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

带有附加实现的原生 javascript 的一些引用:link1和 link2