Image 使用AWS Amplify从React Native上传到S3

我正在尝试使用放大从React Native将图像上载到S3。我能够成功上传文本文件。但不是图像

这是我的密码：

import React from 'react';
import {View, Text, Button, Image} from 'react-native';
import {identityPoolId, region, bucket} from '../auth';
import image from '../assets/background.png';
import Amplify, {Storage} from 'aws-amplify';

Amplify.configure({
    Auth: {identityPoolId,region},
    Storage : {bucket,region}
})

const upload = () => {
    Storage.put('logo.jpg', image, {contentType: 'image/jpeg'})
        .then(result => console.log('result from successful upload: ', result))
        .catch(err => console.log('error uploading to s3:', err));
}

const get = () => {   //this works for both putting and getting a text file
    Storage.get('amir.txt')
        .then(res => console.log('result get', res))
        .catch(err => console.log('err getting', err))
}

export default function ImageUpload(props) {

    return (
        <View style={{alignItems : 'center'}}>
            <Image style={{width: 100, height: 100}} source={image} />
            <Text>Click button to upload above image to S3</Text>
            <Button title="Upload to S3" onPress={upload}/>
            <Button title="Get from S3" onPress={get}/>
        </View>
    )

}

---

在React最近的单页应用程序（SPA）风格的web应用程序中，我们使用了“S3签名URL”来高效地上传/下载文件，我觉得与直接上传/下载相比，这带来了更简洁的设计

---

什么是在中实现的后端服务？

您可以在节点服务器上执行此操作，将其保存到URL并发送回应用程序。 它看起来像：

const AWS = require('aws-sdk');
var s3 = new AWS.S3({accessKeyId:'XXXXXXXXXXXX', secretAccessKey:'YYYYYYYYYYYY', region:'REGION'});

var params = {Bucket: 'yourBucket', Key: 'your_image/your_image.jpg', ContentType: 'image/jpeg'};
s3.getSignedUrl('putObject', params, function (err, url) {
    // send it back to the app
});

在应用程序端，您将看到以下内容：

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      Alert.aler("Upload", "Done");
    } else {
     Alert.aler("Upload", "Failed");
    }
  }
}
xhr.open('PUT', presignedUrlReceiveFromServer)
xhr.setRequestHeader('Content-Type', fileType)
xhr.send({ uri: imageFilePath, type: fileType, name: imageFileName })

---

希望能有所帮助

我最终使用react-native-aws3库将图像上传到S3。 我希望它能更直接地找到关于如何使用AWS amplify直接上传图像的答案，但它不起作用。以下是我所做的：

（此函数的包装器是一个React组件。我正在使用“expo image picker”中的ImagePicker、“expo Permissions”中的权限和“expo Constants”中的常量设置从相机卷上载的图像）

---

是的，我的手机应用程序也是这样。上传和下载速度更快，代码更干净。但是这对他一点帮助都没有。我们想直接从前端上传到S3。然后将对象的URL发送回我们的后端，在

node/express

中实现。这很好，但我想保持简单，直接从前端开始。我只是不明白为什么我可以用我的方法上传一个文本文件，而不是一个图像文件。我可能遗漏了一些小东西。您的密钥在这里公开了-您是如何避开必须向应用程序本身添加密钥这一明显的安全问题的？我没有看到在这里公开的密钥。密钥位于本地.env文件中，而不是此处。除非我错了，否则它是如何从

env

到上面使用的

选项

散列的？我的意思是“暴露”，比如你必须将凭据添加到你加载到手机上的实际代码中。您需要该密钥是可读的，并以纯文本形式添加到此处：

const options=…etc

要避免将密钥添加到您的回购协议或登录到人们手机上的代码，您需要类似s3预签名url策略的东西。i、 我们看一看：。。。作为一个基本的例子。除非我在这里完全遗漏了什么。嗨，我遵循了相同的方法，但是我得到了这个错误{“headers”：{}，“status”：0，“text”：“Stream Closed”}任何帮助都将被删除approciated@user1230795. 你说的完全有道理。我可能需要使用预签名url策略。将来也行。谢谢

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      Alert.aler("Upload", "Done");
    } else {
     Alert.aler("Upload", "Failed");
    }
  }
}
xhr.open('PUT', presignedUrlReceiveFromServer)
xhr.setRequestHeader('Content-Type', fileType)
xhr.send({ uri: imageFilePath, type: fileType, name: imageFileName })

import {identityPoolId, region, bucket, accessKey, secretKey} from '../auth';
import { RNS3 } from 'react-native-aws3';



async function s3Upload(uri) {

      const file = {
               uri,
               name : uri.match(/.{12}.jpg/)[0],
               type : "image/png"
      };

        const options = { keyPrefix: "public/", bucket, region, 
        accessKey, secretKey, successActionStatus: 201}

        RNS3.put(file, options)
            .progress(event => {
                console.log(`percentage uploaded: ${event.percent}`);
            })
            .then(res => {
                if (res.status === 201) {
                    console.log('response from successful upload to s3:', 
                    res.body);
                    console.log('S3 URL', res.body.postResponse.location);
                    setPic(res.body.postResponse.location);

                } else {
                    console.log('error status code: ', res.status);
                }
            })
            .catch(err => {
                console.log('error uploading to s3', err)
            })
}

const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes : ImagePicker.MediaTypeOptions.All,
            allowsEditing : true,
            aspect : [4,3],
            quality : 1
        });

        console.log('image picker result', result);

        if (!result.cancelled) {
            setImage(result.uri);
            s3Upload(result.uri);
        }
    }