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

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

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

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

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

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

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

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

  
    
    
    
    
  
  
    
    

      
      头像上传：
      提交
    
  

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);