【问题标题】: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);
            }
          });
        });
      });
    };
    

    【讨论】:

      猜你喜欢
      • 2012-07-07
      • 2017-08-01
      • 1970-01-01
      • 2016-01-11
      • 2017-03-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-04-09
      相关资源
      最近更新 更多