Question

我是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',
  }
});

Answer 1

我可以通过简单的方式完成。我只是在文件名变量中更改了名称。在设备中，它取一个随机名称。但是上传到s3后，即在AWS s3中，它使用了给定的名称

const file ={
        name://write the name which you want to give EX = name: 'flower.jpg',
       }

在使用React Native上传到AWS S3之前重命名图像

1 个答案: