Express.js 中使用 multer 进行文件上传

阅读时长 8 分钟读完

在前端开发中,经常需要上传文件,例如图片、文档等。为了方便处理文件上传,我们介绍了 Express.js 中一个重要的文件上传中间件:multer。

Multer 简介

multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,主要用于上传文件。它基于 busboy 构建,可处理多个文件上传,并根据配置支持文件大小、文件类型等限制。

安装 Multer

使用npm来安装这个中间件。

Multer 的基本用法

在使用 Multer 中间件实现文件上传时,我们可以通过设置 multer 的相关参数来实现对上传文件的控制。

引入 Multer

在 Express.js 中使用 Multer 需要先引入,语法如下:

创建 Multer 实例

创建 Multer 实例时,可以设置 multer 的参数。例如,在设置文件的保存路径、文件大小和文件类型等。

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

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

上面的代码中,我们设置了 Multer 的存储方式为diskStorage,并将上传的文件保存在uploads/路径下。Multer 还支持保存在内存中和云存储服务中。在limits中设置了文件大小的限制为最大 2MB,同时限制上传的文件数量为 1 个。在fileFilter函数中,我们可以限制文件的类型,这里我们只允许上传 png、jpeg、jpg 和 gif 格式的文件。

在 Express.js 中使用 Multer

为了让 Express.js 使用 Multer,我们可以在需要上传文件的路由处理中添加upload中间件,示例如下:

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

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

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

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

上面的路由处理中,我们将 Multer 中间件作为参数添加到 POST 请求的路由处理中,并使用upload.single()指定上传的表单域为image

在请求处理中,我们从req.file中获取到上传的文件,如果没有上传任何文件,则返回一个错误响应。否则,以 JSON 的格式返回文件和消息。

结论

Multer 是一个方便的、可靠的中间件,用于处理文件上传。在 Express.js 中使用 Multer,可以轻松地上传文件,并设置文件类型、大小和数量等限制。通过本文的介绍,你已经学习了如何安装和配置 Multer 中间件,并使用它实现文件上传操作。下面是完整的实例代码供参考:

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

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

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

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

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

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6750fed4050cf9039c18cc5c

纠错
反馈