tengo una imagen Quiero subirlo a S3 usando aws-amplify. Todos los ejemplos de carga de clases de almacenamiento utilizan documentos de texto; sin embargo, me gustaría subir una imagen. Estoy usando expo que no tiene soporte de react-native-fetch-blob, y react native no tiene soporte de blob... todavía.
Así que mis opciones parecen ser:
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL); if (status === 'granted') { const image = await ImagePicker.launchImageLibraryAsync({ quality: 0.5, base64: true }); const { base64 } = image; Storage.put(`${username}-profileImage.jpeg`, base64); }
¿Es esto correcto?
EDITAR PARA LA RESPUESTA ACTUALIZADA CON LA VERSIÓN DE SOPORTE RN BLOB: He podido resolver esto ahora que React Native ha anunciado soporte blob y ahora solo necesitamos el uri. Vea el siguiente ejemplo:
uploadImage = async uri => { const response = await fetch(uri); const blob = await response.blob(); const fileName = 'profileImage.jpeg'; await Storage.put(fileName, blob, { contentType: 'image/jpeg', level: 'private' }).then(data => console.log(data)) .catch(err => console.log(err)) }Respuesta antigua
Por todo lo que llegas a esto. Terminé usando https://github.com/benjreinhart/react-native-aws3 ¡Esto funcionó perfectamente! Pero no es la solución preferida, ya que me gustaría usar aws-amplify.
Me gustaría agregar una respuesta más completa a esta pregunta.
El siguiente código permite seleccionar imágenes de la biblioteca de dispositivos móviles usando ImagePicker de Expo y almacenar las imágenes en S3 usando Storage de AWS Amplify .
import React from 'react'; import { StyleSheet, ScrollView, Image, Dimensions } from 'react-native' import { withAuthenticator } from 'aws-amplify-react-native' import { ImagePicker, Permissions } from 'expo' import { Icon } from 'native-base' import Amplify from '@aws-amplify/core' import Storage from '@aws-amplify/storage' import config from './aws-exports' Amplify.configure(config) class App extends React.Component { state = { image: null, } // permission to access the user's phone library askPermissionsAsync = async () => { await Permissions.askAsync(Permissions.CAMERA_ROLL); } useLibraryHandler = async () => { await this.askPermissionsAsync() let result = await ImagePicker.launchImageLibraryAsync( { allowsEditing: false, aspect: [4, 3], } ) console.log(result); if (!result.cancelled) { this.setState({ image: result.uri }) this.uploadImage(this.state.image) } } uploadImage = async uri => { const response = await fetch(uri); const blob = await response.blob(); const fileName = 'dog77.jpeg'; await Storage.put(fileName, blob, { contentType: 'image/jpeg', level: 'public' }).then(data => console.log(data)) .catch(err => console.log(err)) } render() { let { image } = this.state let {height, width} = Dimensions.get('window') return ( <ScrollView style={{flex: 1}} contentContainerStyle={styles.container}> <Icon name='md-add-circle' style={styles.buttonStyle} onPress={this.useLibraryHandler} /> {image && <Image source={{ uri: image }} style={{ width: width, height: height/2 }} /> } </ScrollView> ); } } export default withAuthenticator(App, { includeGreetings: true }) const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center' }, buttonStyle: { fontSize: 45, color: '#4286f4' } });Puede pasar el objeto de archivo al método .put
Storage.put('test.png', file, { contentType: 'image/png' }) .then (result => console.log(result)) .catch(err => console.log(err));