在 react-native 中将图像上传到亚马逊 s3答案

【问题标题】：upload an image to amazon s3 in react-native在 react-native 中将图像上传到亚马逊 s3
【发布时间】：2016-03-08 13:16:27
【问题描述】：

我正在尝试将图像上传到亚马逊 s3，如果可能的话，任何人都可以提供如何上传到亚马逊 s3 的链接/文档，非常感谢任何帮助

【问题讨论】：

将您的问题分解为更小的部分并逐一解决。 1) 在 react-native 中建立网络。 2) 在 react-native 网络框架中上传文件。 3) 亚马逊 S3 API。另外，我不确定这个问题是否适合 SO。
您能分享一下您最终使用的解决方案吗？

标签： react-native react-native-camera

【解决方案1】：

S3 选项：

    // this.state.s3options in YourComponent
    {
      "url": "https://yourapp.s3.eu-central-1.amazonaws.com",
      "fields": {
        "key": "cache/22d65141b48c5c44eaf93a0f6b0abc30.jpeg",
        "policy": "eyJleHBpcm...1VDE0Mzc1OVoifV19",
        "x-amz-credential": "AK...25/eu-central-1/s3/aws4_request",
        "x-amz-algorithm": "AWS4-HMAC-SHA256",
        "x-amz-date": "20161125T143759Z",
        "x-amz-signature": "87863c360...b9b304bfe650"
      }
    }

组件：

    class YourComponent extends Component {
      // ...
    
      // fileSource looks like: {uri: "content://media/external/images/media/13", isStatic: true}
      async uploadFileToS3(fileSource) {
        try {
          var formData = new FormData();
          // Prepare the formData by the S3 options
          Object.keys(this.state.s3options.fields).forEach((key) => {
            formData.append(key, this.state.s3options.fields[key]);
          });
          formData.append('file', {
            uri: fileSource.uri,
            type: 'image/jpeg',
          });
          formData.append('Content-Type', 'image/jpeg')
    
          var request = new XMLHttpRequest();
          request.onload = function(e) {
            if (e.target.status === 204) {
              // Result in e.target.responseHeaders.Location
              this.setState({avatarSourceRemote: {uri: e.target.responseHeaders.Location}})
            }
          }.bind(this)
          request.open('POST', this.state.s3options.url, true);
          request.setRequestHeader('Content-type', 'multipart/form-data');
          request.send(formData);
        } catch(error) {
          console.error(error);
        }
      }
    
      // Example display the uploaded image
      render() {
        if (this.state.avatarSourceRemote) {
          return (
            <Image source={this.state.avatarSourceRemote} style={{width: 100, height: 100}} />
          );
        } else {
          return (
            <Text>No Image</Text>
          );
        }
      }
    }

【讨论】：

【解决方案2】：

这对我有用

import fs from 'react-native-fs';
import {decode} from 'base64-arraybuffer';
import AWS from 'aws-sdk';

export const uploadFileToS3 = async (file) => {

  const BUCKET_NAME = 'XXXXXXXXXX';
  const IAM_USER_KEY = 'XXXXXXXXXX';
  const IAM_USER_SECRET = 'XXXXXXXXXXXXXXX';

  const s3bucket = new AWS.S3({
    accessKeyId: IAM_USER_KEY,
    secretAccessKey: IAM_USER_SECRET,
    Bucket: BUCKET_NAME,
    signatureVersion: 'v4',
  });

  const contentType = file.type;
  const contentDeposition = `inline;filename="${file.name}"`;
  const fPath = file.uri;
  const base64 = await fs.readFile(fPath, 'base64');
  const arrayBuffer = decode(base64);

  return new Promise((resolve, reject) => {
    s3bucket.createBucket(() => {
      const params = {
        Bucket: BUCKET_NAME,
        Key: file.name,
        Body: arrayBuffer,
        ContentDisposition: contentDeposition,
        ContentType: contentType,
      };
      s3bucket.upload(params, (error, data) => {
        utils.stopLoader();
        if (error) {
          reject(getApiError(error));
        } else {
          console.log(JSON.stringify(data));
          resolve(data);
        }
      });
    });
  });
};

【讨论】：