S3 使用密钥上传 (react-dropzone-uploader)答案

【问题标题】：S3 Upload with Secret Key (react-dropzone-uploader)S3 使用密钥上传 (react-dropzone-uploader)
【发布时间】：2019-07-19 20:51:20
【问题描述】：

（更新：见下文）我正在将react-dropzone-uploader 实现到我的 React 项目中，到目前为止，使用和自定义它一直很棒。我希望这些上传 POST 到我的 S3 存储桶。

HERE 文档为我提供了如何使用 presigned upload url 执行此操作的示例。我能够使用AWS_ACCESS_KEY_ID 和AWS_SECRET_ACCESS_KEY（下面的最后一个代码 sn-p）进行身份验证，但是我不确定如何让 dropzone 逻辑正确上传。

这是包的默认功能之一：

const Standard = () => {
  const getUploadParams = () => {
    return { url: 'https://httpbin.org/post' }
  }

  const handleChangeStatus = ({ meta }, status) => {
    console.log(status, meta)
  }

  const handleSubmit = (files, allFiles) => {
    console.log(files.map(f => f.meta))
    allFiles.forEach(f => f.remove())
  }

  return (
    <Dropzone
      getUploadParams={getUploadParams}
      onChangeStatus={handleChangeStatus}
      onSubmit={handleSubmit}
      styles={{ dropzone: { minHeight: 200, maxHeight: 250 } }}
    />
  )
}

<Standard />

...这里是文档建议的调用 API 的实现，该 API 返回预签名的 AWS S3 url（验证凭证）：

const getUploadParams = async ({ meta: { name } }) => {
  const { fields, uploadUrl, fileUrl } = await myApiService.getPresignedUploadParams(name)
  return { fields, meta: { fileUrl }, url: uploadUrl }
}

（更新：）
好的，我能够使用 authAWS.js 文件中的以下代码连接到 S3：

var AWS = require('aws-sdk');

AWS.config.update({
  region: 'us-east-2',
  accessKeyId: '<access_key>',
  secretAccessKey: '<secret_key>'
})

export const s3 = new AWS.S3({
  params: {
    Bucket: 'BUCKETNAME'
  },
  apiVersion: '2006-03-01',
});

export const list_ = s3.listObjects({Delimiter: '/invoice/'}, function(err, data) {
  if (err) {
    return alert('There was an error listing your objects: ' + err.message);
  } else {
    console.log(data)
  }
});

【问题讨论】：

标签： reactjs amazon-s3

【解决方案1】：

getUploadParams = async ({ meta }) => {
    try {
        console.log(meta);
        const { name, type } = meta;
        const res = await axios.get('/s3/sign', {
            params: {
                fileName: name,
                contentType: type
            },
            headers: {
                "Access-Control-Allow-Origin": "https://localhost:3000",
                "Access-Control-Allow-Credentials": "true",
                "content-type": type
            }
        }
        );
        console.log(res)
        return res.data.signedUrl;
    } catch (error) {
        console.log(error);
    }
}

我有这个从 S3 Bucket 获取 URL 的函数，但是它们会抛出一个 CORS 问题错误。

希望对你有帮助。

【讨论】：