amazon-web-services - 在使用本机反应上传到 aws s3 之前重命名图像
问题描述
我是 React Native 的初学者。我想在上传到 Amazon s3 按钮之前重命名文件。我可以上传图片,但我不知道如何在使用 react native 上传之前重命名这些图片,目前,我在拍摄后上传图片。但我想在点击发送按钮后上传一次。我怎么能做到这一点。
我怎样才能做到这一点 ?任何人都可以帮助我做到这一点。
我的代码是,
import React, {Component} from 'react';
import {Platform, StyleSheet,Alert, Text,TouchableOpacity, View} from 'react-native';
import { Dropdown } from 'react-native-material-dropdown';
import ImagePicker from 'react-native-image-picker';
import DeviceInfo from 'react-native-device-info';
import { RNS3 } from 'react-native-aws3';
export default class App extends Component<Props> {
static navigationOptions = {
title: 'Check In',
};
constructor(props) {
super(props);
this.state = {
deviceId: '',
isCameraVisiable: false,
latitude: null,
longitude: null,
error: null,
serverTime: null,
file :'',
saveImages : []
}
}
handleSubmit(){
var date = new Date();
var time = date.getTime();
console.log(time);
// var data = {}
// data['time'] = time;
Alert.alert('You cliked on send!');
}
getServerTime() {
fetch('http://worldclockapi.com/api/json/utc/now')
.then((response) => response.json())
.then((responseJson) => {
if (responseJson) {
this.setState({
serverTime: responseJson
})
}
console.log(responseJson);
})
.catch((error) => {
console.error(error);
});
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000 },
);
console.log(this.state.longitude);
console.log(this.state.error);
}
takePic(){
ImagePicker.launchCamera({},(responce)=>{
console.log(responce);
const file ={
uri : responce.uri,
name : responce.fileName;
//name : responce.fileName.replace(responce.fileName,'new_image_name.png');
method: 'POST',
path : responce.path,
type : responce.type,
notification: {
enabled: true
}
}
this.state.saveImages.push(file.name);
//this.state.saveImages.push(file);
console.log('=============********************================');
console.log(this.state.saveImages);
const config ={
keyPrefix :'uploads/',
bucket : '****',
region :'****',
accessKey:'****',
secretKey :'*****',
successActionStatus :201
}
RNS3.put(saveImages ,config)
.then((responce) => {
console.log(responce);
});
})
}
render() {
return (
<View style={styles.container}>
<View style={styles.Camera}>
<TouchableOpacity onPress={this.takePic.bind(this)}>
<Text>Take Picture</Text>
</TouchableOpacity>
</View>
<View style={styles.Send}>
<TouchableOpacity onPress={() => this.handleSubmit}>
<Text>Send</Text>
</TouchableOpacity>
</View>
<View>
<Text>Latitude: {this.state.latitude}</Text>
<Text>Longitude: {this.state.longitude}</Text>
<Text>DeviceUniqueId: {DeviceInfo.getUniqueID()}</Text>
{this.state.error ? <Text>Error: {this.state.error}</Text> : null}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
Dropdown :{
},
Camera :{
justifyContent: 'center',
alignItems: 'center',
marginTop : 20,
backgroundColor : '#48a4ff',
alignItems : 'center',
padding : 1,
borderWidth : 1,
borderColor : '#48a4ff',
},
Send :{
justifyContent: 'center',
alignItems: 'center',
marginTop : 20,
backgroundColor : '#48a4ff',
alignItems : 'center',
padding : 3,
borderWidth : 1,
borderColor : '#48a4ff',
}
});
解决方案
我可以通过简单的方式完成。我刚刚更改了文件名变量中的名称。在设备中,它采用随机名称。但是在上传到 s3 之后,即在 AWS s3 中它需要给定名称
const file ={
name://write the name which you want to give EX = name: 'flower.jpg',
}
推荐阅读
- c# - c#如何在wcf服务中为登录页面创建Get和Post方法
- c# - GeckoFx 加载页面灰色
- r - 求一天的最小值和最大值对应的时间
- java - 生成消息方法
- c# - 无法将类型 void 隐式转换为 System.Collections.GenericList
- excel - 用户将输入列范围,每列将保存在新工作簿中
- android - 在 Android Studio 的 Navigation Drawer 预览中呈现问题 java.lang.IllegalArgumentException: java.lang.ClassCastException@47d5a628
- csv - 从 Cloud Storage 中的 csv 到 Big Query 表的 Dataprep 流不完整(未加载所有记录)
- c++ - 模板类实例之间的类型转换
- javascript - 从多级嵌套对象中动态提取相同的对象名称