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

我已经用一种简单的方式完成了它。我没有写name : responce.fileName,，而是提到了我想给它起的名字，即

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

// simply name ='new_image.png';

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

1 个答案: