该问题的原因是由于 Angular 的 HttpClient 默认情况下是将上传文件分成多个部分后并行上传的。但是,在上传到 AWS S3 时,由于这些部分没有被顺序上传,因此每个部分的 ETag 在 AWS S3 上都是相同的。这将导致上传进度被错误报告,并使文件上传失败。
要解决此问题,可以通过禁用并行上传来使每个部分按顺序上传。示例代码如下:
import { HttpClient, HttpEventType, HttpRequest, HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs';
export class S3UploaderService {
constructor(private http: HttpClient) { }
uploadFile(file: File, bucket: string, key: string): Observable
const url = `https://${bucket}.s3.amazonaws.com/${key}`;
const formData = new FormData();
formData.append('key', key);
formData.append('Content-Type', file.type);
formData.append('acl', 'public-read');
formData.append('success_action_redirect', '');
formData.append('policy', this.getPolicy());
formData.append('x-amz-signature', this.getSignature());
formData.append('x-amz-credential', this.getCredential());
formData.append('x-amz-algorithm', 'AWS4-HMAC-SHA256');
formData.append('x-amz-date', this.getAmzDate());
formData.append('x-amz-server-side-encryption', 'AES256');
const req = new HttpRequest('POST', url, formData, {
reportProgress: true
});
return this.http.request(req);
}
private getAmzDate(): string { // Implement Amz date here }
private getSignature(): string { // Implement Signature here }
private getCredential(): string { // Implement Credential here }
private getPolicy(): string { // Implement Policy here } }
在上传文件时,该服务使用 Angular 的 HttpRequest 和 FormData 对象,将文件上传到 AWS S3。注意,