node aws 内存溢出_如何使用Node和AWS S3设置简单的图像上传

本文是关于如何使用Node.js和AWS S3服务进行图像上传的分步指南。教程涵盖multer和multer-s3中间件的安装,AWS账户注册,S3存储桶创建,获取安全凭证,以及在Postman中测试文件上传的过程。
摘要由CSDN通过智能技术生成

node aws 内存溢出

by Filip Jerga

由Filip Jerga

如何使用Node和AWS S3设置简单的图像上传 (How to set up simple image upload with Node and AWS S3)

分步指南介绍了如何将图像或任何文件上传到Amazon S3服务。 (A step-by-step guide explaining how to upload an image or any file to Amazon S3 service.)

This is the first part of a tutorial in which we will handle the server (Node.js) part of the code.

这是教程的第一部分,我们将在其中处理代码的服务器(Node.js)部分。

I prepared a video tutorial on YouTube as well. You can find a link in the resources at the bottom of this article.

我也在YouTube上准备了一个视频教程。 您可以在本文底部的资源中找到一个链接。

1.我们需要安装的内容和简短说明。 (1. What we need to install & a short description.)

multer: middleware for handling data files. Primarily used for uploading files. More info: Npm Link

multer:用于处理数据文件的中间件。 主要用于上传文件。 更多信息: Npm链接

multer-s3: multer extension for an easy file upload to Amazon S3 service. More info: Npm Link

multer-s3: multer扩展,可轻松将文件上传到Amazon S3服务。 更多信息: Npm链接

aws-sdk: necessary package to work with AWS(Amazon Web Services). In our case S3 service. More info: Npm Link

aws-sdk:与AWS(Amazon Web Services)一起使用的必要软件包。 在我们的情况下为S3服务。 更多信息: Npm链接

Go to your projects and let’s install packages:

转到您的项目,让我们安装软件包:

npm install —-save multer multer-s3 aws-sdk

2.注册AWS (2. Signup for AWS)

First, let’s create an account on https://aws.amazon.com. Amazon offers an amazing free tier you can use for the 1st year. After login, search for S3 service.

首先,让我们在https://aws.amazon.com上创建一个帐户。 亚马逊提供了惊人的免费套餐,您可以在第一年使用。 登录后,搜索S3服务。

Simply said, S3 is a cloud service to store files.

简而言之,S3是用于存储文件的云服务。

We need to create a Bucket. You can imagine a bucket as a folder for your files. Choose a bucket name and the Region. Since this is a simple setup we are not interested in other configurations. (Default setup is ok — if something is not clear ask in comments). Click “next” until you are on Review and create your bucket.

我们需要创建一个Bucket 。 您可以将存储桶想象成文件的文件夹。 选择一个存储桶名称Region 。 由于这是一个简单的设置,因此我们对其他配置不感兴趣。 (默认设置可以,如果不清楚,请在评论中提问)。 单击“ 下一步 ”,直到进入查看”并创建存储桶。

Navigate to your created bucket and check your URL bar. Remember your bucket name (for me “medium-test”) and region (for me “us-east”).

导航到创建的存储桶,然后检查URL栏 。 记住您的存储桶名称 (对我来说是“中等测试”)和区域 (对我来说是“ us-east”)。

Now, we need to get our secure credentials. Navigate through your account name to “my security credentials”. Then “Access Keys” and Create New Access Key.

现在,我们需要获取安全凭据 。 在您的帐户名中导航到“ 我的安全凭证 ”。 然后“ 访问密钥 ”并创建新的访问密钥

Never share your keys with anyone! Temporary save these keys to some file or download the Key File, because we need keys in order to set up a file upload.

切勿与任何人共享您的密钥! 临时将这些密钥保存到某个文件或下载密钥文件,因为我们需要密钥才能设置文件上传。

All right. Amazon Setup Done!

行。 亚马逊设置完成!

3.转到您的编码编辑器 (3. Go to Your Coding Editor)

I will not explain the basics of Node or Express here. This tutorial is focused only on the file upload. If you are interested in the whole project implementation, check my GitHub repository or watch the full tutorial. (You can find links at the end of this blog post).

我不会在这里解释Node或Express的基础知识。 本教程仅侧重于文件上传。 如果您对整个项目的实施感兴趣,请查看我的GitHub存储库或观看完整的教程。 (您可以在此博客文章的末尾找到链接)。

  1. Create your file-upload service with the following implementation (first part):

    使用以下实现(第一部分)创建文件上传服务:

Important note: Never expose your secret credentials directly into file! Never share your secret credentials! Consider to setup environment variables in your local environment or in case of deployed projects, variables in your cloud provider. Best solution would be to use aws-profiles: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html.

重要说明:切勿将您的机密凭据直接公开到文件中! 永远不要分享您的秘密凭据! 考虑在您的本地环境中设置环境变量,或者在已部署项目的情况下,在您的云提供商中设置变量。 最好的解决方案是使用aws-profileshttps : //docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html

First, we are importing all our installed packages. The second part is to configure our AWS. We need to provide our secret keys and region from the URL bar I showed you before.

首先,我们要导入所有已安装的软件包。 第二部分是配置我们的AWS 。 我们需要从我之前向您显示的URL栏中提供我们的密钥和区域

After AWS configuration, we can create an instance of our Amazon S3. We are still not quite done yet. Now, let’s see the second part of this implementation.

完成AWS配置后,我们可以创建Amazon S3的实例。 我们还没有完成。 现在,让我们看一下该实现的第二部分。

Now, we can set up a solution for a multer upload. We need to provide function to the multer object with the following properties.

现在,我们可以为multer上传设置解决方案。 我们需要为具有以下属性的multer对象提供功能。

  1. s3: instance of Amazon S3 we created before.

    s3 :我们之前创建的Amazon S3实例。

  2. bucket: name of our bucket (in my case: “medium-test”)

    bucket :我们的存储桶的名称(在我的情况下为“中等测试”)

  3. acl: access control for the file (‘public read’ means that anyone can view files), you can check all the available types here: amazon link

    acl :文件的访问控制(“公共读取”意味着任何人都可以查看文件),您可以在此处检查所有可用的类型: amazon链接

  4. metada: callback function to set metadata of uploaded files. Here, I am setting additional metadata for a fieldName. You can see this data on the image bellow.

    metada :回调函数,用于设置上传文件的元数据。 在这里,我为fieldName设置了其他元数据。 您可以在下面的图像中看到此数据。

5. key: callback function to set the key property (under which key your file will be saved in your bucket). In our case, we are making a timestamp of a current time and saving this file under this name. This way our filename will always be unique, but you can choose whatever name you want.

5. key:设置key属性的回调函数(文件将在此key下保存在存储桶中)。 在我们的例子中, 我们正在制作当前时间的时间戳,并以该名称保存该文件。 这样,我们的文件名将始终是唯一的,但是您可以选择所需的任何名称。

After all the setup, we are exporting the upload object in order to use it in other files.

完成所有设置后,我们将导出上对象,以便在其他文件中使用它。

4.设置上传图片的路线 (4. Setup a route to upload image)

We are almost done, but users of our app still don’t have access to the image upload. We need to expose this functionality to them. Let’s create an endpoint to save a file.

我们差不多完成了,但是我们应用程序的用户仍然无权访问图像上传。 我们需要向他们公开此功能。 让我们创建一个端点来保存文件。

We are exporting our upload object that we’ve created before and creating a new one from it. The new one is more specific with additional configuration for a single image upload. We are providing an ‘image’ value to it. This value is very important, because we will send our file to a server under this key.

我们将导出之前创建的上载对象,并从中创建一个新的上载对象。 新版本更具体,它具有针对单个图像上传的其他配置。 我们正在为其提供“ 图像 ”价值。 此值非常重要,因为我们将使用此密钥将文件发送到服务器。

Second part is route itself. POST endpoint to ‘/image-upload’. Inside we call singleUpload. Do not forget to pass inside req and res, because multer will get the file we are sending to the server from the req object.

第二部分是路线本身。 POST端点到' / image-upload '。 在内部,我们称为singleUpload 。 不要忘记在req和res内部传递,因为multer会从req对象获取我们要发送到服务器的文件。

We are checking for an error. If there is none, we are sending back JSON with the value of our file location, which is just an URL to the file on Amazon.

我们正在检查错误。 如果没有,我们将使用文件位置的值发送回JSON,该值只是Amazon上文件URL

Aaaaand that’s it! We can upload files to Amazon S3 Now. Pretty simple, what do you think?

啊,就是这样! 我们可以将文件上传到Amazon S3 Now。 很简单,您怎么看?

5.让我们在邮递员中进行测试。 (5. Let’s test it out in Postman.)

To see the results of our hard work, we need to send a request to the server with an image we want to upload. In this part we will test it via Postman. In the next part of the tutorial, we will create an implementation in an Angular application.

要查看我们辛勤工作的结果,我们需要向服务器发送一个带有我们要上传的图像的请求。 在这一部分中,我们将通过邮递员对其进行测试。 在本教程的下一部分中,我们将在Angular应用程序中创建一个实现。

If you don’t have Postman, you can simply download it as a Google Chrome extension. Just search for ‘postman google chrome extension’. Postman is an application to initialise, send, and test requests to the server in a simple matter.

如果您没有Postman,则只需将其下载为Google Chrome扩展程序即可。 只需搜索“ 邮递员谷歌浏览器扩展名 ”。 Postman是一个简单的应用程序,用于初始化,发送和测试对服务器的请求。

  1. Send a post request to an endpoint we created before. In my case I specified in node path of /image-upload.

    将发布请求发送到我们之前创建的端点。 就我而言,我在/ image-upload的节点路径中指定。

  2. Select Body of form-data.

    选择表单数据 主体

  3. Provide the key of an image. You’ll notice that this is a key we set up before in our code. Check a file and choose some file from your computer.

    提供图像密钥 您会注意到,这是我们之前在代码中设置的 。 检查文件,然后从计算机中选择一些文件。

  4. Send the request.

    发送请求

You should get back JSON with the URL of your uploaded file.

您应该使用上传文件的URL取回JSON。

Voilà! That’s it guys. This is a simple file upload for Node. In the next article, I will continue with a frontend implementation for Angular.

瞧! 就是这样。 这是Node的简单文件上传。 在下一篇文章中,我将继续Angular的前端实现。

If you like this tutorial, feel free to check my full course on Udemy — The Complete Angular, React & Node Guide | Airbnb style app.

如果您喜欢本教程,请随时查看有关Udemy的完整课程- 《完整的Angular,React和Node指南》。 Airbnb风格的应用程序

Video Lecture: Youtube video

视频讲座: Youtube视频

Completed Project: My github repository

完成的项目: 我的github存储库

Cheers,

干杯,

Filip

菲利普

翻译自: https://www.freecodecamp.org/news/how-to-set-up-simple-image-upload-with-node-and-aws-s3-84e609248792/

node aws 内存溢出

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值