如何在React Native中将图像上传到s3？

Question

我正在尝试将本地图像从我的 React Native 应用程序（我正在使用 expo）上传到 s3 存储桶，但似乎没有任何效果。 我正在使用react-native-aws3库，但Promise.then永远不会被调用。它也不会抛出任何错误。

这是代码：

const options = {
    bucket: BUCKET_NAME,
    region: REGION,
    accessKey: AWS_USER_KEY,
    secretKey: AWS_PRIVATE_KEY,
    successActionStatus: 201

}

export async function uploadImage(imageUri, imageName, imageType) {
    const file = {
        uri: imageUri,
        name: imageName,
        type: "image/" + imageType
    }

    RNS3.put(file, options).then( (response) => {
            console.log("done")
            console.log(response)
            console.log(response.status)
    })
}

这是存储桶策略：

{
    "Version": "2012-10-17",
    "Id": "Policy1648118554991",
    "Statement": [
        {
            "Sid": "Stmt1648118551643",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET_NAME",
                "arn:aws:s3:::BUCKET_NAME/*"
            ]
        }
    ]
}

这是 IAM 用户策略：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::BUCKET_NAME/*"
        }
    ]
}

我尝试遵循我能找到的所有教程，但似乎没有任何效果。我需要做其他事情吗，比如服务器端？还是政策有问题？

Answer 1

要将内容上传到 Amazon S3 存储桶，请使用官方适用于 JavaScript 的 AWS 开发工具包。要将此 SDK 与 React 结合使用，请查看此文档主题：

React Native 入门

要使用 Amazon S3，请参阅：

Amazon S3 示例

Answer 2

这里提到的代码适用于“react-native”：“0.68.2”
你的 React Native 相机收集像这样的图像 uri

file:///storage/emulated/0/Android/data/com.lobb.agent/files/Pictures/image-e4047ca8-5df9-489d-ac86-2bcdf24cd3436728860500254451478.jpg

以下代码执行这些步骤

1. 接受您的图片uri

2. 将图像 uri 转换为 blob，

3. 向 s3 存储桶发出 put 请求

   const handleImageUpload = async () => {
     try {
       const resp = await fetch(yourImageURI); // 
       const imageBody = await resp.blob(); // conv uri to blob
       const result = await fetch(yourSignedURL, {
         method: 'PUT',
         body: imageBody,
      });
      console.log('result:', result);
    } catch (error) {
    console.log('error upload :', error);
    }
   };
   

Answer 3

最近我在

s3

上应用了相同的上传媒体功能

我使用 base64-arraybuffer 对 ArrayBuffer 进行 Base64 编码和解码，还使用 react-native-fs 进行 react-native 的文件系统访问，还使用 aws-sdk。

这是我用来在 s3 上上传媒体的代码。

# 我的存储桶组件：

import {S3} from 'aws-sdk';
import {BUCKET, ACCESS_KEY_ID, SECRET_ACCESS_KEY, SIGNATURE_VERSION } from '@env';

export const s3bucket = new S3({
  accessKeyId: ACCESS_KEY_ID,
  secretAccessKey: SECRET_ACCESS_KEY,
  Bucket: BUCKET,
  signatureVersion: SIGNATURE_VERSION,
});

# 上传媒体组件：

import fs from 'react-native-fs';
import {s3bucket} from './Constants';
import {decode} from 'base64-arraybuffer';

export const uploadMedia = async obj => {
  return new Promise(async (resolve, reject) => {
    let contentType = obj.mime;
    let contentDeposition = 'inline;filename="' + obj.path + '"';
    const base64 = await fs.readFile(obj.path, 'base64');
    const arrayBuffer = decode(base64);
    s3bucket.createBucket(async () => {
      const params = {
        Bucket: BUCKET,
        Key: obj.path,
        Body: arrayBuffer,
        ContentDisposition: contentDeposition,
        ContentType: contentType,
      };
      s3bucket.upload(params, async (err, data) => {
        if (err) {
          reject(err);
        }
        resolve(data);
      });
    });
  });
};

obj是我们从图库中选择媒体时获得的完整媒体对象，obj.mime是媒体类型。