我已经try 了一段时间,想把一张简单的图片上传到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} />

显然,这种方式不受欢迎,我也读到了Presigneduls之类的--不,我只是太困惑了,想知道如何一劳永逸地做到这一点.

推荐答案

不建议在浏览器端使用AWS SDK使用AWS凭据上传图像,因为这会使您的凭据容易受到针对凭据窃取的MITM攻击.

相反,我建议的是以下步骤的组合:

  1. 对于本地调试,使用AWS凭据为您的调试计算机提供所需的权限.对于部署在云上的应用程序,请为您的计算层分配IAM角色,以便它可以将对象上载到S3存储桶,而无需在代码库上提供显式凭据.
  2. 构建一个基于后端的API,它将生成一个pre-signed URL,您必须将该值返回到应用程序的基于浏览器的部分.
  3. 然后,预先签名的URL将被发送到客户端,并由客户端应用程序使用,将图像从最终用户的浏览器直接上传到S3.

这被认为是一种更安全、更高效的解决方案,因为它可以帮助您限制与恶意上传到存储桶的文件相关的潜在攻击时间(从tnx到URL到期时间)和冲击面(仅限于单个对象).

下面是一个link,您可以按照它在NextJS应用程序中实现您的版本.

Node.js相关问答推荐

链接Inbox类方法,范围在哪里以及为什么发生变化?

@nuxtjs/站点 map 错误提示:找不到包';NitroPack';

为什么在导出的函数中调用node-sqlite3中的数据库方法时不起作用?

Puppeteer 在本地运行良好,但在 Heroku 中运行不佳

找不到 vue-template-compiler@2.6.14 的匹配版本 | Shopware 6.5 更新后的 node 问题

如何使用mongoose引用不在项目中的模型

如何使用 $PATH 变量在系统中全局自动安装 bash 脚本?或者重写脚本到node

使用 fs.createWriteStream 将数据写入 bigquery (node.js) 时出现模式错误

在 Header 中使用 Authorization 方法和新的附加参数:accessToken 有什么区别?

module.exports=require('other') 和临时变量有什么区别?

多字段传递获取查询失败

如何解决这个关于 TaskRunner 的 Node/Express 代码问题?

baseurl64 缓冲区解码

Node.js + Express + Handlebars.js + 局部视图

安装 node.JS 时,node.js 运行时和 npm 包管理器选项有什么区别?

chart.js 无法创建图表:无法从给定项目获取上下文

在 Node 中连接和缩小 JS 文件

要求('babel/register')不起作用

使用 Monit 而不是基本的 Upstart 设置有什么好处?

nodemon + express,监听端口=?