0

我正在开发一个 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))

非常感谢

4

2 回答 2

1

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

如下所示将 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'
})

从打击 URL 中获取灵感：
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);
      });
    }
  });
}
于 2018-03-23T09:37:42.860 回答
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'));
}
于 2018-03-23T09:41:13.313 回答