Как использовать Reaction-S3-Uploader с Reactjs?

Question

Я новичок в реагировании. Я хочу загрузить изображение на s3, но не знаю, как оно будет работать... И не знаю, где я получу путь к изображению из aws (в какой функции)?

Вот мой код реакции

import ApiClient from './ApiClient';  // where it comes from?

function getSignedUrl(file, callback) {
  const client = new ApiClient();
  const params = {
    objectName: file.name,
    contentType: file.type
  };

  client.get('/my/signing/server', { params })   // what's that url?
  .then(data => {
    callback(data); // what should I get in callback?
  })
  .catch(error => {
    console.error(error);
  });
}

Файл моего сервера Server.js

AWS.config.setPromisesDependency(Bluebird)

AWS.config.update({
  accessKeyId: 'accessKey',
  secretAccessKey: 'secret',
  region: 'ap-south-1'
})

const s3 = new AWS.S3({
  params: {
    Bucket: 'Bucketname'
  },
  signatureVersion: 'v4'
})

class S3Service {

  static getPreSignedUrl(filename, fileType, acl = 'public-read') {
    return new Bluebird(resolve => {
      const signedUrlExpireSeconds = 30000
      return resolve({
          signedRequest : s3.getSignedUrl('putObject', {
            Key: "wehab/"+filename,
            ContentType:"multipart/form-data",
            Bucket: config.get('/aws/bucket'),
            Expires: signedUrlExpireSeconds
          }),
          url : `https://${config.get('/aws/bucket')}.s3.amezonaws.com/wehab/${filename}`
        })
    })
  }

}

Answer 1

Во-первых, вам нужно создать корзину s3 и прикрепить эти политики, если имя корзины 'DROPZONEBUCKET' ( Bucket глобально уникален)

политика

{
   "Version": "2012-10-17",
   "Statement": [
       {
           "Sid": "PublicReadGetObject",
           "Effect": "Allow",
           "Principal": "*",
           "Action": [
               "s3:PutObject",
               "s3:GetObject"
           ],
           "Resource": "arn:aws:s3:::DROPZONEBUCKET/*"
       }
   ]
}

CORS config

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>PUT</AllowedMethod>
   <MaxAgeSeconds>9000</MaxAgeSeconds>
   <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Затем запустите сервер node.js и попробуйте загрузить файл.

Как только вы выберете файл для загрузки, он будет называть это getSignedUrl(file, callback) функция и возвращает URL.

Как только вы успешно получите этот URL, вы можете загрузить файл.

Тогда путь к файлу https://s3.amazonaws.com/{BUCKET_NAME}/{FILE_NAME}

ех.

https://s3.amazonaws.com/DROPZONEBUCKET/profile.jpeg

Изменить API, как это

var s3Bucket = new AWS.S3();

var s3 = new Router({ mergeParams: true });

var params = {
    Bucket: 'BUCKET_NAME', // add your s3 bucket name here
    Key: data.filename,
    Expires: 60,
    ContentType: data.filetype
  };

  s3Bucket.getSignedUrl('putObject', params, function (err, data) {
  if (err) console.log(err, err.stack); // an error occurred
  else     console.log(data);           // successful response
});