Question

我想从我的相册中挑选照片并将其上传到AWS S3，然后使用滑动器显示照片。

我能够将多张照片上传到AWS S3。但是，我注意到我必须预先分配要上传到AWS S3的照片数量。

例如，如果我预先分配了3张要上传到AWS S3的照片，并从我的相册中选择了3张照片，则效果很好。我会看3张照片。请参见下面的代码：

constructor(){
 super()
 this.state = {
 picture1:'',
 picture2:'',
 picture3:'',
  }
}

takePics(){
ImagePicker.openPicker({
multiple: true
}).then(response => {
console.log(response[0].filename)
const file = {
  uri : response[0].sourceURL,
  name: response[0].filename,
  type: 'image/png'
}
const file1 = {
 uri : response[1].sourceURL,
 name: response[1].filename,
 type: 'image/png'
}
const file2 = {
 uri : response[2].sourceURL,
 name: response[2].filename,
 type: 'image/png'
}
const config = {
  bucket:'mybucket',
  region:'my region',
  accessKey:'myaccesskey',
  secretKey:'mysecretkey',
  successActionStatus:201
}
RNS3.put(file, config)
.then((response) => this.setState({picture1:response.body.postResponse.location}))
RNS3.put(file1, config)
.then((response) => this.setState({picture2:response.body.postResponse.location}))
RNS3.put(file2, config)
.then((response) => this.setState({picture3:response.body.postResponse.location}))
})
}

displayPhotos(){
return(
  </View>
  <Swiper style={styles.wrapper} showsButtons={this.state.showsButtons} showsPagination={this.state.showsPagination} loop={true}>
  <View style={styles.slide1}>
  <Image
     style={{width: "100%", height: "100%"}}
     source={{uri:this.state.picture1}}/>
  </View>
  <View style={styles.slide2}>
     <Image
        style={{width: "100%", height: "100%"}}
        source={{uri:this.state.picture2}}/>
  </View>
  <View style={styles.slide3}>
     <Image
        style={{width: "100%", height: "100%"}}
        source={{uri:this.state.picture3}}/>
  </View>
  </Swiper>
  </View>
)
}

但是，如果我选择的照片较少（例如我选择了2张照片），则什么也不会显示。无论选择2张还是3张甚至更多张照片，我都想在屏幕上显示。我应该使用for循环吗？有什么建议么？

Answer 1

我设法处理了。

constructor(props) {
    super(props)

    this.state = {
      amazonData: [],
      pictures:''
    }
  }
takePics = () => {

    ImagePicker.openPicker({
      multiple: true,
      maxFiles: 3
    }).then(response => {
      store.amazonData = [];
      let tempArray = []
      response.forEach((item) => {
        let image = {
          uri: item.path,
          width: item.width,
          height: item.height,
          name: item.filename,
          type: 'image/png'
        }
        const config = {
          bucket: 'goodvet',
          region: 'ap-northeast-2',
          accessKey: 'AKIAIJ4ZNXCKL6CIYIXQ',
          secretKey: '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',
          successActionStatus: 201
        }
        tempArray.push(image)

        RNS3.put(image, config)
          .then(responseFromS3 => {
            this.setState({ amazonData: [...this.state.amazonData, responseFromS3.body.postResponse.location] })

          })
      })
      this.setState({ pictures: tempArray })
      { this.hideIcons() }

    })
  }

takePicHandler() {
    return (
      <View>
          <SwiperFlatList
            showPagination={this.state.showsPagination}
            data={this.state.pictures}
            renderItem={({ item }) =>
              <View style={styles.uploadedImageView}>
                <Image
                  style={{ width: "100%", height: "100%" }}
                  source={item} />
      </View>
    )
  }

Answer 2

这就是我的做法。一切正常。

  _upload=(saveImages)=>{
    const config ={
       bucket:'mybucket',
       region:'my region',
       accessKey:'myaccesskey',
       secretKey:'mysecretkey',
       successActionStatus:201
      }

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

<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>

反应本机将多张照片上传到AWS S3

2 个答案: