在 React Native (Expo) 中将图像转换为 blob 并上传到 S3 存储桶 [英] Turning image into blob in React Native (Expo) and uploading to S3 bucket

问题描述

我有一个可以单击图片的相机组件.我使用 expo 的 FileSystem 将点击的图片存储在本地缓存目录中.看起来像这样:

I have a camera component which I clicks a picture. I store the clicked picture using expo's FileSystem in the local cacheDirectory. Looks some thing like this:

onPictureSaved = async photo => {
    await FileSystem.moveAsync({
        from: photo.uri,
        to: `${FileSystem.cacheDirectory}test.jpg`
    });}

我的下一步是将本地缓存目录中的图像转换为 blob 并通过 aws-sdk 将图像上传到 S3:

My next step is to my next stop is converting the image in the local cacheDirectory into a blob and upload the image into S3 via the aws-sdk:

var params = {
            Bucket: "my-bucket", 
            Key: 'test.jpg',
            Body: blob
           };

           s3.upload(params, function(err, data) {
            if (err) {
                console.log(err);
            } // an error occurred
            else  { 
                console.log(data);
            }         // successful response

          }

然而，我为了完成这个过程中的这个小步骤而安装的任何方法或模块根本没有工作.由于 expo 客户端，我无法使用 RNFS、react-native-fetch-blob 或任何其他需要链接的模块.我不想为了一件事而脱离世博会.有没有其他方法可以做到这一点?

However, any methods or modules I install in order to accomplish this tiny step in the process hasn't been working at all. I can't use RNFS, react-native-fetch-blob or any other modules that require linking thanks to the expo client. I don't want to detach expo just for one thing. Is there any other way to accomplish this?

推荐答案

看一看 https://github.com/expo/image-upload-example/issues/3#issuecomment-387263080.最新的博览会版本支持 blob，因此您可以执行以下操作:

Take a look at https://github.com/expo/image-upload-example/issues/3#issuecomment-387263080. The latest expo release supports blobs, so then you can do something like the following:

uploadToS3 = async (fileUri, s3Bucket, s3Key) => {
const response = await fetch(fileUri);
const blob = await response.blob();
return new Promise((resolve, reject) => {
  const params = {
    Bucket: s3Bucket,
    Key: s3Key,
    Body: blob,
  };
  s3.upload(params, function(err, data) {
    if (err) {
      console.log('Something went wrong');
      console.log(err);
      reject(err);
    } else {
      console.log('Successfully uploaded image');
      resolve(data);
    }
  });
});

};

希望这会有所帮助！

这篇关于在 React Native (Expo) 中将图像转换为 blob 并上传到 S3 存储桶的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！