Question

我是React Native的初学者。我想在用户拍摄照片后将图像上传到Amazon s3中。我能够做到这一点。但是，我想在用户单击“发送”按钮后上传一次拍摄的照片。为此，我将拍摄的照片存储在阵列中。当用户单击发送按钮时，我想将存储的照片上传到AWS s3。在那里，我面临以下问题。

must provide contentType option with the object content type.

有人可以帮助我解决这个问题吗？我没有弄错，我想在保存到数组之前更改拍摄图像的名称。我该怎么办。

我的代码是，

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
          }
      }
      //this.state.saveImages.push(file.name);
      this.state.saveImages.push(file);
      console.log('=============********************================');
      console.log(this.state.saveImages);
    })
  }

    _upload=(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._upload(this.state.saveImages)}>
            <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

我已经使用地图完成了。

我的代码是，

_upload=(saveImages)=>{
    const config ={
        keyPrefix :'uploads/',
        bucket : 's3merahkee',
        region :'us-east-2',
        accessKey:'AKIAII2OTQSLHFW5EYKA',
        secretKey :'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',
        successActionStatus :201
      }

      this.state.saveImages.map((image) => {
           RNS3.put(image,config)
          .then((responce) => {
            console.log('=============********************================');
            console.log(saveImages);
             Alert.alert('You cliked on send!');
          });
      }); 
  }

在按钮中，

<TouchableOpacity onPress={() => this._upload()}>
     <Text>Send</Text>
</TouchableOpacity>

如何在单击按钮时将数组传递到函数中，以响应本机？如何在存储在数组中之前更改图像名称？

1 个答案: