如何将 react-s3-uploader 与 reactjs 一起使用？

Question

我是 reactjs 的新手，想在 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'（存储桶是全局唯一的）

政策

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

CORS 配置

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