首页 > 解决方案 > 从 Angular 客户端将文件上传到 Amazon S3?

问题描述

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

我坚持使用 Angular的第 6 步。

在此处输入图像描述

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>

标签: angularamazon-web-servicesamazon-s3

解决方案


推荐阅读