Question

我正在遵循此tutorial，我将src中的URL切换为要返回的预签名URL，但是我一直得到无效的存储桶名称，并且不确定为什么。我认为这就是本教程在说

时所说的

Note: Don't forget change the url of the image source to have your bucket name.

我做了一个{{this.presignedURl}}，它确实将网址输出到页面，因此可以肯定地正确分配了该网址，但是仍然出现错误。我做错了什么？

错误：

Object { headers: {…}, status: 400, statusText: "Bad Request", url: "http://localhost:3000/api/v1/upload", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:3000/api/v1/upload: 400 Bad Request", error: "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>InvalidBucketName: The specified bucket is not valid.

角度服务

  getPreSignedUrl(image: File, userId: string) {
    const queryParams = `?userId=${userId}`;

    return this.http.get(
      "http://localhost:3000/api/upload" + queryParams
    );
  }



  imageUpload(imageForm: FormData) {
    console.log('image uploading');
    return this.http.post('http://localhost:3000/api/v1/upload',
    imageForm);
   }

component.ts

onImagePicked(event: Event): void {
    const FILE = (event.target as HTMLInputElement).files[0];
    this.imageObj = FILE;
  }

  onImageUpload() {
    this.submitListingService
      .getPreSignedUrl(this.urls[0], this.userId)
      .subscribe(res => {
        console.log("res below");
        console.log(res);

        this.presignedUrl = res["url"];

        console.log("URL" + this.presignedUrl);
        const imageForm = new FormData();
        imageForm.append("image", this.imageObj);
        this.submitListingService.imageUpload(imageForm).subscribe(res => {
          this.imageUrl = res["image"];
        });
      });
  }

html

  <input (change)="onImagePicked($event)" placeholder="Upload Image" type="file" />
  <button (click)="onImageUpload()">Upload Image</button>
   {{this.presignedURl}}
  <div *ngIf="imageUrl">
    Preview Image from AWS
    <br />
    <img width="200px" src='{{this.presignedUrl}}' /></div>

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Answer 1

我看了看该教程，它似乎没有提供预签名的url。该方法基本上是上载具有public-read权限的图像，并使用s3端点读取该图像。

根据本教程，您应该在存储段url后加上路径。

<img width="200px" src="https://my-upload-example-bucket.s3.amazonaws.com/{{ 
     imageUrl }}" 
/>

您应将my-upload-example-bucket替换为您的s3存储桶名称。

S3桶的Cors

您也可以允许所有来源，直到您可以使用它为止，然后您可以限制核心部分。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

如果要生成预签名的URL，

您还可以轻松地使用lambda而不是使用express后端来生成预签名的url。

import AWS = require('aws-sdk');
const S3_BUCKET = 'bucket-to-presign-example'


const getpresignedUrl = async (fileName, fileType) => {
  const s3 = new AWS.S3();  // Create a new instance of S3

  // Set up the payload of what we are sending to the S3 api
  const s3Params = {
    Bucket: S3_BUCKET,
    Key: fileName,
    Expires: 5000,
  };

  const presignedURL = await s3.getSignedUrlPromise('getObject', s3Params);
  return presignedURL;
}

您还可以使用putObject生成用于上传目的的预签名网址。

s3前置URL POST表示存储桶名称错误

1 个答案:

S3桶的Cors

如果要生成预签名的URL，