node_express框架03 + formidable 实现文件上传和用户访问

最新推荐文章于 2023-11-17 13:55:49 发布

John Rivers

最新推荐文章于 2023-11-17 13:55:49 发布

阅读量421

点赞数

分类专栏： node.js 文章标签： express

本文链接：https://blog.csdn.net/m0_66492535/article/details/129914590

版权

node.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

需求：用户上传文件，并且用户可以便捷的访问到上传的文件

1. 使用框架创建好项目结构：

node_express03_脚手架Express-generator_游小北的博客-CSDN博客

不会的参考上面的博客，里面介绍了 express 的脚手架和目录结构。

2. 响应 html 文件让用户可以上传文件

其实就是响应一个 ejs 文件给用户，ejs 文件如下：

注意点：form 标签里面必须要加属性：enctype="multipart/form-data"，然后 input 标签也需要设置 name 属性。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上传</title>
  </head>
  <body>
    <!-- 必须加上 enctype="multipart/form-data" -->
    <form action="/upload" method="post" enctype="multipart/form-data">
      <!-- type、name 属性必填 -->
      头像上传：<input type="file" name="upload" />
      <button>提交</button>
    </form>
  </body>
</html>

3. 接收保存文件 formidable

formidable 是一个非常适合处理文件上传的包，https://www.npmjs.com/package/formidable

下载：

npm i formidable

导入：

const formidable = require("formidable");

使用：我们需要在 formidable 函数设置文件的保存路径，以及保留后缀的选项。可以实现保存上传的文化。

var express = require("express");
var router = express.Router();
// 导入依赖
const formidable = require("formidable");

// 虽然 写的是 根路径，但实际访问的是 /upload 路径，如果 写了 /api ,那就是 /upload/api
router.post("/", function (req, res, next) {
  // 创建 form 对象
  const form = formidable({
    multiples: true,
    // 保存上传的文件的路径
    uploadDir: __dirname + "/../public/images",
    // 保留后缀
    keepExtensions: true,
  });
  // 解析请求报文
  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
    console.log(files); // 包含需要的 newFilename 新文件名
    res.send("ok");
  });
});

module.exports = router;

4. 发送给用户

我们把文件的地址给用户让用户方便的访问到。我们要记录资源的存放路径，但是不能完全记录整个路径，考虑到服务器的域名和端口的变化。我们只需保存根目录到图片的路径。

 // 保存资源路径,前面省略的路径是 /public,这是资源路径，不用写
    const url = "/images/" + files.upload.newFilename;
    res.send("资源路径为" + url);