使用 react-aws-s3 将 csv 文件上传到 S3

洋基涂鸦

我正在尝试创建一个反应应用程序,用户可以在其中将文件上传到 S3 存储桶。

我有一个可以成功从用户那里获取文件的反应组件。还有一个按钮,它调用我可以将文件发送到 S3 的函数。

我正在使用react-aws-s3,因为这将是我需要的唯一直接功能,所以我不想安装整个aws-sdk包并膨胀我的应用程序。

现在我已经关注了一些关于如何做到这一点的不同博客/说明(比如这个),但无法上传文件。

我的上传代码如下所示(我会将访问密钥移动到 env 变量):

const S3_BUCKET = ...
const REGION = ...
const ACCESS_KEY = ...
const SECRET_ACCESS_KEY = ...

const config = {
    bucketName: S3_BUCKET,
    region: REGION,
    accessKeyId: ACCESS_KEY,
    secretAccessKey: SECRET_ACCESS_KEY,
};

const ReactS3Client = new S3(config);
// the name of the file uploaded is used to upload it to S3
ReactS3Client.uploadFile(datasheet, datasheet.name)
    .then((data) => console.log(data.location))
    .catch((err) => console.error(err));

我已启用公共访问,将存储桶策略添加到此:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicListGet",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*"
            ],
            "Resource": [
                "arn:aws:s3::: my bucket name",
                "arn:aws:s3::: my bucket name/*"
            ]
        }
    ]
}

以及对此的cors政策:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2",
            "ETag"
        ]
    }
]

但是当我尝试上传文件时,我收到了 400 错误的请求响应。

body: (...)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 400
statusText: "Bad Request"
type: "cors"
url: ...
[[Prototype]]: Response

它说是type: cors但我完全启用了cors,对吗?我在这里想念什么?

茨维坦·伊万诺夫

当我按照您粘贴的教程进行操作时,我设法将文件上传到 s3。它也适用于您的 cors 政策。这里有几件事要检查:

  1. 网络选项卡和 S3 的实际响应在此处输入图像描述这将为您提供有关您遇到的实际问题的更多信息
  1. 您的存储桶策略仅允许 List 和 Get,但在本教程中,它是s3: * 因此您的用户必须有权将文件上传到此存储桶。

  2. 仔细检查演示中的上传逻辑,如下所示:

    const handleFileInput = (e) => {
        setSelectedFile(e.target.files[0]);
    }

    const uploadFile = async (file) => {
        const ReactS3Client = new S3(config);
        // the name of the file uploaded is used to upload it to S3
        ReactS3Client
        .uploadFile(file, file.name)
        .then(data => console.log(data.location))
        .catch(err => console.error(err))
    }
    return <div>
        <div>React S3 File Upload</div>
        <input type="file" onChange={handleFileInput}/>
        <br></br>
        <button onClick={() => uploadFile(selectedFile)}> Upload to S3</button>
    </div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章