在上传到 aws s3 之前，如何在 React Native 中重命名捕获的图像？

Question

我是 React Native 的初学者。我想在上传到 AWS s3 之前重命名图像。直到上传到 AWS s3 我已经完成了。但是我不知道如何在上传前重命名图片。

比如我抓取的图片名称是：image-3bcf276c-cab1-4400-83a6-8f92971977c8.jpg。我想改变它：b514c19662714234_geolocation_222222222222222.png

我该怎么做。

我的文件上传代码是，

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,
        method: 'POST',
        path : responce.path,
        type :  responce.type,
        notification: {
            enabled: true
          }
      }
       console.log('fffffffffffffffffffffffffffffffffffffffffffffff');
       console.log(file);
        this.state.saveImages.push(file);
        console.log('=============********************================');
        console.log(this.state.saveImages);
    })
  }

  _upload=(saveImages)=>{
    const config ={
        keyPrefix :'uploads/',
        bucket : 's3merahkee',
        region :'***********',
        accessKey:'************',
        secretKey :'**************',
        successActionStatus :201
      }

      this.state.saveImages.map((image) => {
           RNS3.put(image,config)
          .then((responce) => {
            console.log('=============********************================');
            console.log(saveImages);
             Alert.alert('You cliked on send!');
          });
      });
  }
    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._upload()}>
            <Text>Send</Text>
          </TouchableOpacity>
        <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',
  }
});

Answer 1

我用简单的 way.Instead 写法完成了 name : responce.fileName, 我提到了我想给它起的名字，即

name : DeviceInfo.getUniqueID()+'_'+this.state.latitude+'_'+this.state.longitude+'.jpg',

//简单的名字='new_image.png';

在上传到 aws s3 之前，如何在 React Native 中重命名捕获的图像？

How can I rename the captured image in react native begore uploading to aws s3?

amazon-s3

amazon-web-services

react-native

react-native-image-picker