Question

我正在使用aws-sdk在s3存储桶中上传图像。请在下面查看我的代码，我已经花了一天的时间。

uploadImageOnS3 = () => {

    var S3 = require("aws-sdk/clients/s3");

    const BUCKET_NAME = "testtest";
    const IAM_USER_KEY = "XXXXXXXXXXXXX";
    const IAM_USER_SECRET = "XXXXX/XXXXXXXXXXXXXXXXXXXXXX";

    const s3bucket = new S3({
      accessKeyId: IAM_USER_KEY,
      secretAccessKey: IAM_USER_SECRET,
      Bucket: BUCKET_NAME
    });
    let contentType = "image/jpeg";
    let contentDeposition = 'inline;filename="' + this.state.s3BucketObj + '"';
         let file= {
         uri: this.state.fileObj.uri,
         type: this.state.fileObj.type,
         name: this.state.fileObj.fileName

     };
    s3bucket.createBucket(() => {
      const params = {
        Bucket: BUCKET_NAME,
        Key: this.state.s3BucketObj,
        Body: file,
        ContentDisposition: contentDeposition,
        ContentType: contentType

      };
      s3bucket.upload(params, (err, data) => {
        if (err) {
          console.log("error in callback");
          console.log(err);
        }
        // console.log('success');
        console.log(data);

      });
    });
  };

错误：

不支持的身体有效载荷对象

请帮助我简短说明一下，我也在使用react-native-image-picker进行图片上传。

Answer 1

您必须在主体流中使用数组缓冲区来传递数据对象。根据aws文档，您可以在body参数中传递数据流，字符串，数组缓冲区或blob数据类型。

请检查下面的代码，这将解决您的问题，

import fs from "react-native-fs";
import { decode } from "base64-arraybuffer";

uploadImageOnS3 = async() => {

    var S3 = require("aws-sdk/clients/s3");

    const BUCKET_NAME = "testtest";
    const IAM_USER_KEY = "XXXXXXXXXXXXX";
    const IAM_USER_SECRET = "XXXXX/XXXXXXXXXXXXXXXXXXXXXX";

    const s3bucket = new S3({
      accessKeyId: IAM_USER_KEY,
      secretAccessKey: IAM_USER_SECRET,
      Bucket: BUCKET_NAME,
      signatureVersion: "v4"
    });
    let contentType = "image/jpeg";
    let contentDeposition = 'inline;filename="' + this.state.s3BucketObj + '"';
    const fPath = this.state.fileObj.uri;

    const base64 = await fs.readFile(fPath, "base64");
    //console.log(base64);

    const arrayBuffer = decode(base64);
    //console.log(arrayBuffer);
    s3bucket.createBucket(() => {
      const params = {
        Bucket: BUCKET_NAME,
        Key: this.state.s3BucketObj,
        Body: arrayBuffer,
        ContentDisposition: contentDeposition,
        ContentType: contentType

      };
      s3bucket.upload(params, (err, data) => {
        if (err) {
          console.log("error in callback");
          console.log(err);
        }
        // console.log('success');
        console.log(data);

      });
    });
  };

Answer 2

您可以查看React Native AWS扩增文档以了解适当的过程。在文档中，提到可以在body参数中传递数据流，字符串，数组缓冲区或blob数据类型。

Answer 3

    import AWS from 'aws-sdk';
    import fs from 'react-native-fs';
    import {decode} from 'base64-arraybuffer';
    export const uploadFileToS3 = async (file) => {
    
        const BUCKET_NAME = 'xxxxx';
          const IAM_USER_KEY = 'xxxxxxxxxxxxxxxxx';
          const IAM_USER_SECRET = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        
          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) => {

                if (error) {
                  reject(getApiError(error));
                } else {
                  console.log(JSON.stringify(data));
                  resolve(data);
                }
              });
            });
          });
}

通过使用aws-sdk在s3存储桶上上传图像来进行本机反应

3 个答案: