如何从 Next.js 应用程序安全地上传图片到 Amazon S3？

Question

我正在构建一个NextJS应用程序，需要授权用户能够上传图片到Amazon S3存储桶，以供发布使用。

有什么最好的方法？我已经搜索了一下，但只找到了通过express上传的教程，或者使用在前端运行的react-s3包，但我担心将Amazon S3的敏感数据存储在前端代码中。

我能否在Next中的API路由上编写lambda函数并从那里发送？还是有安全的方式从前端上传。我对BE没有很多经验，对express等也不熟悉...但任何帮助都将不胜感激。

- Tom Griffiths

Answer 1

所以你需要在api文件夹中创建一个具有此功能的文件

import aws from "aws-sdk";
 aws.config.update({
    accessKeyId: "your id ",
    secretAccessKey: "your secret ",
    region: "your bucket region",
    signatureVersion: 'v4',
  });
  const s3 = new aws.S3();
  const post = await s3.createPresignedPost({
    Bucket: "your bucket name",
    Fields: {
      key: req.query.file,
    },
    Expires: 600, // seconds
    ACL:"public-read",
    Conditions: [
      ['content-length-range', 0, 12048576], 
    ],
  });

如果您调用此API，它将返回一个链接URL，并提供一些数据以放入标头中，以便在10分钟内访问上传图像，如果您使用文件获取此URL，则可以将其上传到S3存储桶中。

const res = await fetch(
  `${server}/api/admin/add/addImage?file=${file.name}`
);

const { url, fields } = await res.json();
const formData = new FormData();

Object.entries({ ...fields, file }).forEach(([key, value]) => {
  formData.append(key, value);
});

const upload = await fetch(url, {
  method: "POST",
  body: formData,
});
setUrlfileUploaded(`${upload.url}/${file.name}`);

if (upload.ok) {
  console.log("Uploaded successfully!");
} else {
  console.error("Upload failed.");
}

- Mohammad Itani