通过 aws Amplify 使用 Storage 类对本机图像上传进行反应

Question

我有一张图片。我想使用 aws-amplify 将它上传到 S3。所有Storage类上传示例均使用文本文档；但是，我想上传一张图片。我正在使用不支持 react-native-fetch-blob 的 expo，并且 react native 还没有 blob 支持。

所以我的选择似乎是：

1. 通过 lambda 创建节点服务。
2. 仅将 base64 信息上传到 S3，而不是 Blob。

const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL); if (status === 'granted') { const image = await ImagePicker.launchImageLibraryAsync({ quality: 0.5, base64: true }); const { base64 } = image; Storage.put(`${username}-profileImage.jpeg`, base64); }

这对吗？

Answer 1

使用 RN BLOB 支持版本编辑更新答案： 现在我已经能够解决这个问题，因为 React Native 已经宣布支持 blob，现在我们只需要 uri。请参阅以下示例：

uploadImage = async uri => {
  const response = await fetch(uri);
  const blob = await response.blob();
  const fileName = 'profileImage.jpeg';
  await Storage.put(fileName, blob, {
    contentType: 'image/jpeg',
    level: 'private'
  }).then(data => console.log(data))
    .catch(err => console.log(err))
}

旧答案

尽你所能。我最终使用了https://github.com/benjreinhart/react-native-aws3 这非常有效！但不是首选解决方案，因为我想使用 aws-amplify。

Answer 2

我想为这个问题添加一个更完整的答案。

以下代码允许使用 Expo 中的 ImagePicker 从移动设备库中挑选图像，并使用 AWS 中的 Storage 将图像存储在 S3 中放大。

import React from 'react';
import { StyleSheet, ScrollView, Image, Dimensions } from 'react-native'
import { withAuthenticator } from 'aws-amplify-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'

Amplify.configure(config)

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

  // permission to access the user's phone library
  askPermissionsAsync = async () => {
    await Permissions.askAsync(Permissions.CAMERA_ROLL);
  }

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

  uploadImage = async uri => {
    const response = await fetch(uri);
    const blob = await response.blob();
    const fileName = 'dog77.jpeg';
    await Storage.put(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}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: width, height: height/2 }} />
        }
      </ScrollView>
    );
  }
}

export default withAuthenticator(App, { includeGreetings: true })

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonStyle: {
    fontSize: 45, 
    color: '#4286f4'
  }
});

Answer 3

您可以将文件对象传递给 .put 方法

Storage.put('test.png', file, { contentType: 'image/png' })
  .then (result => console.log(result))
  .catch(err => console.log(err));