Загрузить на S3 из React Native с AWS Amplify - PullRequest
Новая
       84

Загрузить на S3 из React Native с AWS Amplify

2 голосов
/ 01 декабря 2019

Я пытаюсь загрузить изображение на S3 из React Native с помощью Amplify. Я могу загрузить текстовый файл УСПЕШНО. Но не изображение.

Вот мой код: 

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

}

сообщение об ошибке: 

error uploading to s3: [Error: Unsupported body payload number]

Ответы [ 2 ]

1 голос
/ 01 декабря 2019

В нашем недавнем веб-приложении в стиле Single Page Application (SPA) от React мы использовали «S3 Signed URLs» для эффективной загрузки / выгрузки файлов, и я чувствовал, что это привело к более чистому дизайну по сравнению с прямой выгрузкой / загрузкой. .

В чем реализованы внутренние сервисы?

0 голосов
/ 02 декабря 2019

В конечном итоге я загрузил изображения на S3 с помощью библиотекиact-native-aws3. Хотелось бы, чтобы было проще найти ответы о том, как загрузить изображение напрямую с помощью AWS-усиления, но это не сработало. Итак, вот что я сделал:

(оболочкой этой функции является React Component. Я использую ImagePicker из 'expo-image-picker', Разрешения из 'expo-permissions' и Константы из 'expo-константы ', чтобы настроить загрузку изображений с камеры Roll *) 

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