从Angular Client上传文件到S3?

时间:2019-07-13 20:09:10

标签: angular amazon-web-services amazon-s3

我正在尝试仅将png文件上传到S3。这是上传系统的体系结构。

我对第6步使用Angular感到困惑。

enter image description here

URL生成代码看起来像[Node JS / Typescript]

public getWaterMarkURL(payload: any, expiry: number = 20, Bucket: string = SNAP_SENSE_BUCKET_PATH): Promise<any> {
    let validationCheck = this.validateView(payload);
    if (!validationCheck.status) return Promise.reject({...validationCheck, statusCode: 412});
    let Key: string = `watermark/${payload.user_id}/${payload.event_id}/watermark.png`;
    let signedURL: string = this.s3.getSignedUrl('putObject', { Bucket, Key, Expires: expiry * 60, ACL: "public-read" });
    return Promise.resolve({body: {data: { signedURL }}, statusCode: 201 });
  }

文件上传代码看起来像[Angular 8]

let p: Promise<any>[] = [logoIMG.getBufferAsync(Jimp.MIME_PNG), this.generateSignedURL()];

    Promise.all(p).then((respArr: any[]) => {          
      let image: Buffer = respArr[0];
      let url: string = respArr[1];          
      this.http.put(url, image).subscribe(console.log, console.error);
    });

配置

<CORSConfiguration>
      <CORSRule>
          <AllowedOrigin>*</AllowedOrigin>
          <AllowedMethod>GET</AllowedMethod>
          <AllowedMethod>PUT</AllowedMethod>
          <MaxAgeSeconds>3000</MaxAgeSeconds>
          <AllowedHeader>Authorization</AllowedHeader>
          <AllowedHeader>Content-Type</AllowedHeader>
      </CORSRule>
</CORSConfiguration>

0 个答案:

没有答案