Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 带有预签名url的S3文件上载返回状态(已取消)_Angular_Amazon Web Services_Amazon S3_Client_Pre Signed Url - Fatal编程技术网

Angular 带有预签名url的S3文件上载返回状态(已取消)

Angular 带有预签名url的S3文件上载返回状态(已取消),angular,amazon-web-services,amazon-s3,client,pre-signed-url,Angular,Amazon Web Services,Amazon S3,Client,Pre Signed Url,我正在尝试使用angular客户端将文件上载到AmazonS3。我已经使用NodeJs应用服务器生成了预先签名的URL。将文件上载到预先签名的URL时,无法从客户端上载文件,gets(已取消) 我尝试以以下格式上载文件:buffer、base64、formData和rawfile 如果我尝试用邮递员以二进制形式将其上传到生成的URL中,这会起作用 使用NodeJs生成预签名URL const s3 = new AWS.S3({ accessKeyId: AWS_AC

我正在尝试使用angular客户端将文件上载到AmazonS3。我已经使用NodeJs应用服务器生成了预先签名的URL。将文件上载到预先签名的URL时,无法从客户端上载文件,gets(已取消)

我尝试以以下格式上载文件:bufferbase64formData和rawfile

如果我尝试用邮递员以二进制形式将其上传到生成的URL中,这会起作用

使用NodeJs生成预签名URL

      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

您能告诉我取消上传的问题在哪里吗?

HTML:

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

CORS配置设置在S3上吗?是的,如果不是,邮递员应该抛出一个错误。好的。。邮递员不会抛出cors错误,它只是浏览器。如果您正确设置了CORS。。我想不出为什么它在postman中有效,但在angular code中无效的其他原因。我添加了我正在使用的代码的额外信息。我无法在代码中发现问题,但我只是尝试了类似的代码从angular上传pdf。让我添加一些细节,看看是否有帮助。这种方法对您有效吗?如果是,你能告诉我你的CORS配置吗?是的,它的工作代码。刚刚用CORSi更新的“AllowedOrigins”中缺少http://www.AllowedOrigins:[“”],非常感谢!很高兴我能帮忙。
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);
            }
         );
   }
 uploadfileAWSS3(file, fileuploadurl) {
      const req = new HttpRequest('PUT', fileuploadurl, file);
      return this.http.request(req);
   }
    <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);
        });
      }
    });
  }
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "http://localhost:4200"
        ],
        "ExposeHeaders": []
    }
]