Question

我有一张图片。我想使用aws-amplify将其上传到S3。所有Storage类上传示例都使用文本文档;但是，我想上传一张图片。我正在使用expo，它没有来自react-native-fetch-blob的支持，并且本机没有blob支持......但是。

所以我的选择似乎是：

通过lambda创建节点服务。
仅将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));

使用存储类

3 个答案: