带有预签名 url 的 S3 文件上传返回状态已取消

问题描述

我正在尝试使用 angular 客户端将文件上传到 Amazon S3。我已经使用 NodeJs 应用程序服务器生成了预签名 URL。将文件上传到预先签名的 URL 时，但无法从客户端上传文件，被（取消）。

我尝试上传以下格式的文件：buffer、base64、formData 和 raw File

如果我尝试与邮递员一起上传到二进制格式的生成的 URL，这会起作用

使用NodeJs

生成预签名网址

      const s3 = new AWS.S3({
         accessKeyId: AWS_ACCESS_KEY,secretAccessKey: AWS_SECRET_ACCESS_KEY,region: 'eu-central-1',});
      const signedUrlExpireSeconds = 60 * 5;
      const presignedS3Url = s3.getSignedUrl('putObject',{
         Bucket: process.env.bucket,Key: './test3Public.pdf',Expires: signedUrlExpireSeconds,ACL: 'public-read',ContentType: 'application/pdf',});

HTML

<input
      type="file"
      (change)="onFileSelected($event)"
      accept="application/pdf,.docx"
   />

组件.ts

onFileSelected(event: any) {
      this.filetoUpload = <File>event.target.files[0];
     
      this.fileUpload
         .generatePresignedURL(this.filetoUpload.name)
         .pipe(first())
         .subscribe(
            (data) => {
               this.fileUpload
                  .uploadfileAWSS3(this.filetoUpload,data.presignedS3Url)
                  .pipe(first())
                  .subscribe(
                     (data) => {
                        console.log('uploaded',data);
                     },(error) => {
                        console.log('error',error);
                     }
                  );
            },(error) => {
               console.log('error',error);
            }
         );
   }

我发送文件的格式：

Angular 11 服务

 uploadfileAWSS3(file,fileuploadurl) {
      const req = new HttpRequest('PUT',fileuploadurl,file);
      return this.http.request(req);
   }

请问上传被取消的问题在哪里？

解决方法

HTML：

    <input type="file" (change)="onFileSelected($event)" accept="application/pdf,.docx"
    />

角度代码：

  onFileSelected(event) {
    const fileToUpload = <File>event.target.files[0];
    const bucketParms = {
      Bucket: "sample-temp-bucket",Key: fileToUpload.name,ContentType: "application/pdf",ACL: "public-read",Expires: 3600,};
    s3.getSignedUrl("putObject",bucketParms,(error,url) => {
      if (error) console.log("error",error);
      if (url) {
        this.http.put(url,fileToUpload).subscribe((response) => {
          console.log("response receved is ",response);
        });
      }
    });
  }

CORS：

[
    {
        "AllowedHeaders": [
            "*"
        ],"AllowedMethods": [
            "PUT","POST"
        ],"AllowedOrigins": [
            "http://localhost:4200"
        ],"ExposeHeaders": []
    }
]