如何将图像从本地路径上传到 S3答案

【问题标题】：How to upload images from local path to S3如何将图像从本地路径上传到 S3
【发布时间】：2018-03-23 09:05:10
【问题描述】：

我正在开发一个 React Native 应用程序并尝试将存储在设备上的图像上传到 S3。我知道图片的路径，但是当我尝试上传图片时，S3 会返回不支持的文件错误或使用文件名上传文件，但文件只包含文件路径字符串。

我正在使用aws-amplify 来建立这些连接。

这是我使用的代码块：

 const file = `${RNFetchBlob.fs.dirs.DocumentDir}/${localFilePath}`;
 Storage.put("exampleFolder/" + userId + ".jpeg", file)
                .then(result => console.log(result))
                .catch(err => console.log(err))

非常感谢

【问题讨论】：

标签： amazon-web-services react-native amazon-s3 react-native-fetch-blob aws-amplify

【解决方案1】：

aws-mobile-react-native-starter repo 中有一个很好的例子。您只需要读取文件，然后上传即可。

return files.readFile(imagePath)
  .then(buffer => Storage.put(key, buffer, { level: 'private', contentType: result.type }))
  .then(fileInfo => ({ key: fileInfo.key }))
  .then(x => console.log('SAVED', x) || x);

要读取他们使用过的文件react-native-fetch-blob：

readFile(filePath) {
    return RNFetchBlob.fs.readFile(filePath, 'base64').then(data => new Buffer(data, 'base64'));
}

【讨论】：

【解决方案2】：

您将文本作为文件的内容发送，而不是作为二进制文件发送

像下面这样将Hello存储在S3文件中

Storage.put('test.txt', 'Hello')
    .then (result => console.log(result))
    .catch(err => console.log(err));

尝试为您的案例 image/png 提及 contentType，如下面的文本文件示例

Storage.put('test.txt', 'Private Content', {
    level: 'private',
    contentType: 'text/plain'
})

从打击网址中获取灵感：
https://viblo.asia/p/serverless-mobile-application-development-made-with-react-native-and-aws-mobilehub-Az45bnmQ5xY#11-add-source-code-15

https://gist.github.com/zeroFruit/d46d4cae57e5e8cf59e1b541c0bf322e

来自上述第一个 URL 的代码

import Amplify, { API, Storage } from 'aws-amplify-react-native';
import RNFetchBlob from 'react-native-fetch-blob';
import ImagePicker from 'react-native-image-picker';

import { awsmobile } from './aws-exports'; // point path of aws-exports.js
import files from './files'; // point path of files.js

Amplify.configure(awsmobile);  


saveImage = () => {
  const options = {
    title: 'Select Avatar',
    storageOptions: {
      skipBackup: true,
      path: 'images'
    }
  };

  ImagePicker.showImagePicker(options, (response) => {
    console.log('Response = ', response);

    if (response.didCancel) {
      console.log('User cancelled image picker');
    }
    else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    }
    else if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
    }
    else {
      RNFetchBlob
      .config({
        fileCache: true,
        appendExt: 'png',
      })
      .fetch('GET', response.uri, {
      })
      .then((res) => {
        // upload to storage
        files.readFile(res.data)
          .then(buffer => Storage.put('image.png', buffer, { level: 'public', contentType: 'image/png' }))
          .then(x => console.log('SAVED', x) || x);
      });
    }
  });
}

【讨论】：

非常感谢。这个解决方案似乎也有效，但@RadekCzemerys 的回答更直接。
是的，同意。感谢您的评论。（不是一个反应的人，而是一个谷歌人：p）