[英]React Native Image Upload via aws Amplify using Storage class
I have an image. 我有一张图片。 I want to upload it to S3 using aws-amplify. 我想使用aws-amplify将其上传到S3。 All the Storage class upload examples are using text documents; 所有Storage类上传示例都使用文本文档; however, I would like to upload an image. 但是,我想上传一张图片。 I am using expo which does not have support from react-native-fetch-blob, and react native does not have blob support... yet. 我正在使用expo,它没有来自react-native-fetch-blob的支持,并且本机反应没有blob支持......
So my options seem to be: 所以我的选择似乎是:
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); }
Is this Correct? 它是否正确?
EDIT FOR UPDATED ANSWER WITH RN BLOB SUPPORT VERSION: I have been able to solve this now that React Native has announced blob support and now we only need the uri. 使用RN BLOB支持版本编辑更新的答案:我已经能够解决这个问题,因为React Native已经宣布了blob支持,现在我们只需要uri。 See the following example: 请参阅以下示例:
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))
}
Old Answer 老答案
For all you get to this. 对于你所有你来说。 I ended up using https://github.com/benjreinhart/react-native-aws3 This worked perfectly! 我最终使用https://github.com/benjreinhart/react-native-aws3这完美无缺! But not the preferred solution as I would like to use aws-amplify. 但不是首选的解决方案,因为我想使用aws-amplify。
I would like to add a more complete answer to this question. 我想为这个问题添加一个更完整的答案。
The below code allows to pick images from the mobile device library using ImagePicker from Expo and store the images in S3 using Storage from AWS Amplify . 下面的代码允许挑选使用ImagePicker从展移动设备库的图像和使用Storage从AWS 放大图像存储在S3。
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'
}
});
You can pass file object to .put method 您可以将文件对象传递给.put方法
Storage.put('test.png', file, { contentType: 'image/png' })
.then (result => console.log(result))
.catch(err => console.log(err));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.