express 上传图片

在Web应用程序中，允许用户上传文件（如图片）是一项非常常见的任务。在本文中，我们将介绍如何使用Node.js Web框架Express来实现基本的图片上传功能。

前置条件

在开始之前，请确保您已经安装了Node.js和npm包管理器，并且已经创建了一个基本的Express应用程序。

安装依赖

为了实现图片上传，我们需要使用一个名为multer的npm包。它是一个Node.js中间件，用于处理multipart/form-data类型的表单数据，例如文件上传。

你可以通过运行以下命令安装它：

npm install --save multer

实现图片上传

1. 在路由文件中引入multer

   const multer = require('multer');

2. 定义存储的位置和文件名

   const storage = multer.diskStorage({
     destination: function (req, file, cb) {
       cb(null, 'uploads/');
     },
     filename: function (req, file, cb) {
       cb(null, Date.now() + '-' + file.originalname);
     }
   });

   上面的代码将上传的文件存储在uploads/目录下，并将文件名设置为当前时间戳加上原始文件名。

3. 创建multer对象

   const upload = multer({ storage: storage });

4. 添加路由处理函数

   router.post('/upload', upload.single('image'), (req, res) => {
     res.send('Image uploaded successfully');
   });

   上面的代码处理/upload路由，使用upload.single()函数指定接收名为image的文件。在这个例子中，我们只接受单个文件。如果您需要上传多个文件，请使用upload.array()。

5. 创建表单

   <form action="/upload" method="POST" enctype="multipart/form-data">
     <input type="file" name="image">
     <br>
     <button type="submit">Upload</button>
   </form>

   在HTML表单中，将enctype属性设置为multipart/form-data以支持文件上传。

6. 测试上传

   现在您已准备好测试您的图片上传功能了！打开浏览器访问http://localhost:3000/upload，选择一个图片文件并点击上传按钮。如果一切顺利，您将看到“Image uploaded successfully”消息。

总结

在本文中，我们介绍了如何使用Express和multer实现基本的图片上传功能。虽然此示例只上传单个文件，但multer支持上传多个文件和其他类型的表单数据。希望这篇文章对您有所帮助，让您能够更轻松地实现Web应用程序中的文件上传功能。

完整代码示例：

-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------

----- --- - ----------
----- ------ - -----------------

----- ------- - --------------------
  ------------ -------- ----- ----- --- -
    -------- ------------
  --
  --------- -------- ----- ----- --- -
    -------- ---------- - --- - -------------------
  -
---

----- ------ - -------- -------- ------- ---

---------------------- ----------------------- ----- ---- -- -
  --------------- -------- ---------------
---

------------ --------

---------------- -- -- ------------------- ------- -- ---- --------

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/51504