javascript - react-native through upload image on s3 Bucket using aws-sdk - Stack Overflow

admin管理员组

文章数量:1323348

I am using aws-sdk for upload image on the s3 bucket. Please look at my code below I already spend one day in it.

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);

      });
    });
  };

Error:

Unsupported body payload object

Please help me to short out I am also using react-native-image-picker for image upload.

I am using aws-sdk for upload image on the s3 bucket. Please look at my code below I already spend one day in it.

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);

      });
    });
  };

Error:

Unsupported body payload object

Please help me to short out I am also using react-native-image-picker for image upload.

• javascript
• reactjs
• amazon-web-services
• react-native
• amazon-s3

Share Improve this question Follow edited Jun 20, 2019 at 8:40 Subhash Patel asked Jun 20, 2019 at 8:36 Subhash PatelSubhash Patel 67477 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

You have to use array buffer in body stream to pass data object. As per the aws documentation you can pass data stream, string, array buffer or blob data type in body parameter.

Please check below code, which will resolve your issue,

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);

      });
    });
  };

You can check out the React Native AWS amplify documentation for the proper process. In the documentation, it is mentioned that you can pass data stream, string, array buffer, or blob data type in body parameter.

    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);
                }
              });
            });
          });
}

本文标签： javascriptreactnative through upload image on s3 Bucket using awssdkStack Overflow