如何使用Expo Image Picker从移动设备上传简单的图像到AWS S3

Question

我将Expo与React Native一起使用，我真的被困在此... Expo不支持我已经使用的Firebase Cloud Storage来上传图像。因此，我留下了我从未与之合作过的AWS S3。我已经在github上找到了这个示例：https：//github.com/expo/image-upload-example/但是我无法掌握什么是后端部分以及使用的是什么...我很抱歉，我没有提供任何代码尝试，但我完全迷失了AWS上的BLA BLA BLA文档的数量。

我已经在AWS S3控制台中完成了，因此我创建的存储桶可以公开访问。我对此没有问题。我不需要签署用户来上传图像，任何其他限制都需要完成简单的上传。

因此，如果有人可以通过该代码来帮助我。提前致谢。

Answer 1

我尚未具体使用过博览会，但是我已经设置了我的RN项目，以便能够上传到S3。给定您发布的示例，它与我最终所做的相似。

很明显，您需要做的第一件事就是在AWS S3上设置一个水桶。从AWS控制台内部，您应该能够找到您的特定访问密钥和访问秘密，您将需要两个以及您的存储键名。

您发布的示例背后的想法，以及我最终要做的是拥有一个受控的服务器，您可以安全地使用访问密钥和秘密来创建一个唯一可以直接上传图像上传的唯一"签名" URL进入你的水桶。您不想在客户b/c上执行此操作，在客户上有一个秘密只是要求被黑客入侵。假设客户对客户的没有完全安全。

我已经构建了一个节点服务器作为我的应用程序的后端，因此我已经启动并运行了此部分。如果您不熟悉创建后端服务器，我建议您查看如何在此处设置Express Server。您可以在Heroku等服务上免费托管该应用程序（具有限制）。甚至还有一篇很棒的文章在这里涵盖了整个过程。基本上，您可以创建一个具有不同GET路由的应用程序，该应用程序可能会被客户应用程序击中。该路由将接受一个要上传的文件名称的查询参数。您应该使用官方的AWS SDK，该AWS SDK将获取您的访问密钥，秘密，存储键名和文件名，然后生成一个唯一的URL，该URL将被发送回您的客户端应用。

本质上，您的客户端应用程序要做的就是准备上传的文件。您应该准备好文件的文件名，然后将GET请求发送到您在Express应用程序上刚设置的URL路由。当您从服务器中获得响应时，应该包含该唯一的URL。然后，我使用React Antive Fetch Blob库来执行您刚收到的唯一URL的PUT请求。如果一切顺利，应该将文件直接牢固地上传到该存储桶中。确保将标题中的Content-Type设置为要上传的文件类型。

我知道这不是可以上传的一堆代码，但是它应该帮助您了解所需的内容并使您朝正确的方向前进。

Answer 2

我长期存在相同的问题。这就是我所做的。

确保您遵循设置应用程序的放大指南。amplify init，amplify add auth，amplify push，然后是amplify add storage，然后执行此操作。

import Amplify, { Storage } from 'aws-amplify'
import config from './src/aws-exports'
// import awsconfig from './aws-exports';
// Might need to switch line 7 to awsconfig 
Amplify.configure(config)
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { Button, Image, View, Platform, StyleSheet, Text, TextInput } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
function App() {
  const [image, setImage] = useState(null)
  const [name, setName] = useState('Evan Erickson')
  useEffect(() => {
    (async () => {
      if (Platform.OS !== 'web') {
        const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (status !== 'granted') {
          alert('Sorry, we need camera roll permissions to make this work!');
        }
      }
    })();
  }, []);
  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });
    
    console.log(result) 
    async function pathToImageFile(data) {
      try {
        const response = await fetch(data);
        const blob = await response.blob();
        await Storage.put(`customers/${name}`, blob, {
          contentType: 'image/jpeg', // contentType is optional
        });
      } catch (err) {
        console.log('Error uploading file:', err);
      }
    }
    // later
    pathToImageFile(result.uri);
  }
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      <Button title="Upload image" onPress={() => {alert(image)}} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
export default withAuthenticator(App)```