如何使用nextjs/node/ts正确上传到s3

ee7vknir  于 2023-06-29  发布在  Node.js
关注(0)|答案(1)|浏览(146)

我已经尝试了一段时间,现在上传一个简单的图像到s3。有这么多的信息在那里,很多都过时了,所以我在这里简单地问,你如何使用ts/nextjs/node上传一个简单的图像到s3。我有一个IAM用户,我有凭证,我需要的一切,这里是我所有的相关代码,它返回一个响应,但没有上传到桶。

const [selectedFile, setSelectedFile] = useState<any>(null);

  const handleFileUpload = (e: React.FormEvent<HTMLInputElement>) => {
    setSelectedFile(e.currentTarget.files?.[0]);
  };

  const onSubmit: SubmitHandler<RegisterFormSchemaType> = async (data) => {
    const s3 = new AWS.S3({
      accessKeyId: process.env.S3_ACCESS_KEY as string,
      secretAccessKey: process.env.S3_SECRET_KEY as string,
    });

    const uploadedImage = await s3.upload({
      Bucket: *bucketname*,
      Key: "test",
      Body: selectedFile,
    });

    console.log(uploadedImage);

  };

我的输入html:

<Input type="file" onChange={handleFileUpload} />

显然,这种方式是不赞成的,我也读到了关于presignedurls和什么,不是,我只是很困惑,想知道如何做到这一点一劳永逸。

slsn1g29

slsn1g291#

不建议在浏览器端使用AWS SDK使用AWS凭据上传图像,因为这会使您的凭据容易受到以凭据抓取为目标的MITM攻击。
我推荐的是以下步骤的组合:
1.对于本地调试,请使用AWS凭据为调试计算机提供所需的权限。对于部署在云上的应用程序,请为您的计算层分配IAM角色,以便它可以将对象上传到S3存储桶,而无需在代码库上提供显式凭据。
1.构建一个基于后端的API,它将生成一个pre-signed URL,您必须将其返回到应用程序的基于浏览器的部分。
1.预签名的URL然后将被发送到客户端侧并且由客户端侧应用使用以将图像从最终用户的浏览器直接上传到S3。
这被认为是一个更安全和有效的解决方案,因为它可以帮助您限制与恶意上传文件到存储桶相关的潜在攻击时间(tnx到URL过期时间)和爆炸面(Upload仅限于单个对象)。
下面是一个link,您可以按照它在NextJS应用程序中实现您的版本。

相关问题