如何在本机反应中将图像上传到 s3？答案

【问题标题】：How can I upload images to s3 in react native?如何在本机反应中将图像上传到 s3？
【发布时间】：2022-07-18 17:05:55
【问题描述】：

我正在尝试将本地图像从我的 react 本机应用程序（我正在使用 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/*"
        }
    ]
}

我尝试按照我能找到的所有教程进行操作，但似乎没有任何效果。我是否必须做其他事情，比如服务器端？还是政策有问题？

【问题讨论】：

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

【解决方案1】：

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

Getting started in React Native

要使用 Amazon S3，请参阅：

Amazon S3 examples

【讨论】：

【解决方案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

以下代码执行这些步骤

接受你的图片 uri
将图像 uri 转换为 blob，

向 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);
 }
};

【讨论】：