在 AWS S3 中使用签名请求并上传照片？答案

【问题标题】：Using signed requests with AWS S3 and uploading photos?在 AWS S3 中使用签名请求并上传照片？
【发布时间】：2018-04-19 06:41:05
【问题描述】：

所以我有一个类似于 slack 的 react 本机应用程序，我正在尝试将图像上传到 s3。

我选择了 getSignedUrl 路线。

所以客户拍了一张照片，获取存储桶的签名 url 然后为该用户更改服务器上的 url 然后是对已获取的签名 url 的 put 请求。

它主要适用于将文件放入正确的存储桶中并且它们是照片。但是

A) 该链接让我下载文件而不是在浏览器中显示它。

B) 该文件不是图像...它是一个 xml 文件，只能在 photoshop 中打开

我已尝试更改 data.append 类型中的类型，将标头添加到已签名的请求将 x-amz- 标头添加到已签名的请求中硬编码服务器中的文件类型使用本机模块将图像转换为 base64 字符串，但仍然出现错误。

客户端调用服务器

uploadToServer() {

    // alert('coming soon!');

    //Go back to profile page
    this.props.navigation.goBack();

    //grab user from navigator params
    let user = this.props.navigation.state.params.user
    let pic = this.state.selected;

    // turn uri into base64
    NativeModules.ReadImageData.readImage(pic.uri, (image) => {
      console.log(image);

      var data = new FormData();
      data.append('picture', {
        uri: image,
        name: pic.filename,
        type: 'image/jpeg'
      });

      //get the signed Url for uploading
      axios.post(api.getPhotoUrl, {fileName: `${pic.filename}`}).then((res) => {

        console.log("get Photo URL response", res);

        //update the user with the new url
        axios.patch(api.fetchUserByID(user.id), {profileUrl: res.data.url}).then((resp) => {

          console.log("Update User response", resp.data);
        }).catch(err => errorHandler(err));

        //upload the photo using the signed request url given to me.
        //DO I NEED TO TURN DATA INTO A BLOB?
        fetch(res.data.signedRequest, {
          method: 'PUT',
          body: data
        }).then((response) => {
          console.log("UPLOAD PHOTO RESPONSE: ", response);
        }).catch(err => errorHandler(err))
      }).catch((err) => errorHandler(err))
    })
  }

GET SIGNED URL 逻辑从头到尾

router.post('/users/sign-s3', (req, res) => {
      const s3 = new aws.S3({signatureVersion: 'v4', region: 'us-east-2'});
      const fileName = `${req.user.id}-${req.body.fileName}`;
      const fileType = req.body.fileType;
      const s3Params = {
        Bucket: AWS_S3_BUCKET,
        Key: `images/${fileName}`,
        Expires: 60,
        ContentType: 'image/jpeg',
        ACL: 'public-read'
      };

      s3.getSignedUrl('putObject', s3Params, (err, data) => {
        if (err) {
          console.log(err);
          return res.end();
        }
        const returnData = {
          signedRequest: data,
          url: `https://${AWS_S3_BUCKET}.s3.amazonaws.com/${s3Params.Key}`
        };
        res.write(JSON.stringify(returnData));
        res.end();
        return null;
      });
    });

【问题讨论】：

在我的 webapp 中（与本机略有不同），但我认为就 s3 而言这可能无关紧要 - 在我传递的 s3Params 中，我还有一个 BODY 键，它具有 photoBuffer 的值除了bucket、key、expires、contentType和ACL。也许这有帮助？

标签： javascript amazon-web-services react-native amazon-s3

【解决方案1】：

如果要在浏览器中显示，则需要将内容类型从图像更改为支持的 xml 格式。

Refer this 并相应地设置内容类型。

【讨论】：