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

Question

我正在开发一个反应本机应用程序，并试图将存储在设备上的图像上传到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))

非常感谢

Answer 1

在AWS-Mobile-Reacter-native-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'));
}

Answer 2

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

中的文件

下面的类似于下面的hello将在s3文件中存储

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

尝试提及contentType，对于您的案例图像/png，如下示例中的文本文件

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

从打击URL中汲取灵感：
https://viblo.asia/p/serverless-mobile-application-development-made-with-react-native-native-native-and-aws-mobilehub-az45bnmq5xy#11-add-source-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);
      });
    }
  });
}