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

Posted 2023-03-11

【中文标题】在 react-native 中将图像上传到亚马逊 s3

【英文标题】：upload an image to amazon s3 in react-native

【发布时间】：2016-03-08 13:16:27

【问题描述】：

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

【问题讨论】：

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

您能分享一下您最终使用的解决方案吗？

【参考方案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);
        
      );
    );
  );
;