Как загрузить изображение base64 в S3 с помощью функции «Амплифицируй, реагируй»

Question

В поисках простого примера загрузки изображения base64 в aws S3 с использованием функции усиления.

Answer 1

Это простой способ загрузки нескольких изображений.Это должно работать и для одного изображения.

import {Storage} from "aws-amplify";

UploadPhotos(SelectedImages) {
    SelectedImages.forEach(async (element) => {
        let name = element.filename;
        let access = { level: "protected", contentType: "image/jpeg" };
        let imageData = await fetch(element.uri);
        let blobData = await imageData.blob();
        try {
            Storage.put(name, blobData, access);
        } catch (err) {
            console.log("UploadPhotos error: ", err);
        }
    });
}

Answer 2

Предполагая, что вы сконфигурировали Amplify Storage и задали разрешения для public, вот пример кода, который использует Storage из Amplify для загрузки изображений в корзину S3.Изображения извлекаются с локального устройства с помощью ImagePicker из Expo.

import React from 'react';
import { 
  StyleSheet, 
  ScrollView, 
  Image, 
  Dimensions } from 'react-native'
import { ImagePicker, Permissions } from 'expo'
import { Icon } from 'native-base'

import Amplify from '@aws-amplify/core'
import Storage from '@aws-amplify/storage'
import config from './aws-exports'

class App extends React.Component {
 state = {
 image: null,
 }

 // fetch a single image from user's device and save it to S3
 useLibraryHandler = async () => {
  await this.askPermissionsAsync()
  let result = await ImagePicker.launchImageLibraryAsync(
   {
    allowsEditing: false,
    //aspect: [4, 3],
   }
  )
  console.log(result);
  if (!result.cancelled) {
    this.setState({ image: result.uri })
    this.uploadImage(this.state.image)
  }
 }

 // add a single image to S3
 uploadImage = async uri => {
  const response = await fetch(uri)
  const blob = await response.blob() // format the data for images 
  const folder = 'images'
  const fileName = 'flower.jpeg'
  await Storage.put(folder + '/' + fileName, blob, {
   contentType: 'image/jpeg',
   level: 'public'
  }).then(data => console.log(data))
    .catch(err => console.log(err))
 }

 render() {
  let { image } = this.state
  let {height, width} = Dimensions.get('window')

  return (
    <ScrollView style={{flex: 1}} contentContainerStyle={styles.container}>
      <Icon 
        name='md-add-circle'
        style={styles.buttonStyle}
        onPress={this.useLibraryHandler}
      />
      {/*
        true && expression always evaluates to expression, 
        and false && expression always evaluates to false 
      */}
      {image &&
        <Image source={{ uri: image }} style={{ width: width, height: height/2 }} />
      }

    </ScrollView>   
  );
 }
}

Название изображения жестко закодировано, что не очень хорошо.Но, тем не менее, это очень хорошее начало.