如何从本地路径上传图片到S3

Question

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

我正在使用 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))

非常感谢

Answer 1

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

如下所示将 Hello 存储在 S3 文件中

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

针对您的情况尝试提及 contentType image/png，如下例中的文本文件

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

从打击中汲取灵感URLs:
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);
      });
    }
  });
}

Answer 2

aws-mobile-react-native-starter 存储库中有一个很好的示例。您只需要读取文件，然后就可以上传了。

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

如何从本地路径上传图片到S3

How to upload images from local path to S3

amazon-web-services

react-native

amazon-s3

react-native-fetch-blob

aws-amplify