如何从 Next JS 应用程序安全地将图像上传到亚马逊 S3？

Question

我正在构建一个 NextJS 应用程序，我需要授权用户能够将图像上传到 Amazon S3 存储桶，以便在帖子中使用。

最好的方法是什么？我环顾四周，但只能找到通过express上传的教程，或使用在前端运行的react-s3包的教程，但我对在前端代码中存储亚马逊s3的敏感数据持谨慎态度。

我可以在 next 的 api 路由中编写 lamda 函数并从那里发送吗？或者有没有一种安全的方式从字体端上传。我对 BE 的经验很少，所以对快递等方面的经验也很少……但如果有任何帮助，我将不胜感激。

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.");
}