使用react-native-aws3上传到S3

时间:2019-12-01 18:16:53

标签: amazon-web-services react-native amazon-s3

我正在使用react-native-aws3库将图像上传到s3。该组件是RNS3。 我已成功上传,并且能够访问URL并查看图像,但是,无法使用AWS控制台在S3存储桶中找到对象。这是代码:

import React from 'react';
import {View, Text, Button, Image} from 'react-native';
import {region, bucket, accessKey, secretKey} from '../auth';
import image from '../assets/background.png';
import { RNS3 } from 'react-native-aws3';

const upload = () => {

    const file = {
        uri : 'file:///Users/ayunas/Documents/lambda/cooking-recipe-source-control-fe/CookingRecipesExpo/assets/background.png',
        name : 'my_logo.png',
        type: 'image/png'
    }

    console.log(file.uri);


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

    RNS3.put(file, options)
        .progress(event => {
            console.log(`percent: ${event.percent}`);
        })
        .then(res => {
            if (res.status === 201) {
                console.log('response from successful upload to s3:', res.body);
            } else {
                console.log('status code: ', res.status);
            }
        })
        .catch(err => {
            console.log('error uploading to s3', err)
        })
}

const get = () => {
    Storage.get('amir.txt')
        .then(res => console.log('result get', res))
        .catch(err => console.log('err getting', err))
}

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>
    )

}

export default ImageUpload;

关于如何在AWS控制台中查找映像的任何见解?我可以单击res.location并使用URL导航到该对象。就是这样。

1 个答案:

答案 0 :(得分:0)

您刷新控制台了吗? S3控制台UI中有一个实际的刷新选项。如果不刷新,它可以隐藏东西。