基于express-generator框架的文件上传

最新推荐文章于 2023-12-06 18:45:42 发布

feellikeatypo

最新推荐文章于 2023-12-06 18:45:42 发布

阅读量173

点赞数 6

文章标签： express

本文链接：https://blog.csdn.net/weixin_74085863/article/details/134458507

版权

安装环境

$ npm i -g express-generator
$ express
##安装express 到generator 文件夹
$ express -e generator 
##还需要安装formidable包
$ npm i formidable

目录结构:

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

首先在我的html中的form表单中必须添加enctype="multipart/form-data"属性,否则上传的文件解析时会被视为普通的文本字段，而不会以文件的形式进行上传。这样会导致文件无法正确地被上传到服务器，因为浏览器默认会将表单数据编码为 application/x-www-form-urlencoded 格式，这种格式不支持文件上传。

ejs代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>文件上传</h2>
    <hr>
    <!-- 文件上传的必须属性 -->
    <form action="/portrait" method="post" enctype="multipart/form-data">
        用户名: <input type="text" name="username"><br>
        头像: <input type="file" name="portrait"><br>
        <hr>
        <button>点击提交</button>
    </form>
</body>
</html>

主文件解析:

首先，引入了 Express 模块和 path 模块，以及 formidable 模块用于处理文件上传

接下来定义了几个路由:

在这前两个路由中，当用户访问根路径 "/" 或 "/portrait" 路径时，服务器会分别渲染名为 "index" 和 "portrait" 的视图页面。

然后，通过定义了一个 POST 路由，用于处理文件上传

在这个路由中，当用户提交包含 "/portrait" 路径的表单时，服务器会创建一个 formidable.IncomingForm 实例来处理文件上传。

这里值得一提的是,设置文件上传目录,在这个地方,我来回写了几次的路径都不对,网页一直显示路径错误,于是只能借助于path模块去调整,我先是查看了__dirname的所在目录,原来是我整个项目中的routes目录,由于我需要将文件保存到它的上级目录下的public下的images中,所有通过path.join方法,../到最外层再重新定位,最终定位成功.

在 form.parse() 方法中，会解析请求报文，并在解析完成后返回 "aa" 字符串。

最后，导出了路由模块

index.js:

var express = require('express');
var path = require('path');
var router = express.Router();
const formidable = require('formidable')
/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});
router.get('/portrait', (req, res) => {
  res.render('portrait')
})
// 处理文件上传
router.post('/portrait', (req, res,next) => {
  // 创建form对象
  var dirname = __dirname;
  console.log('dirname',dirname)
  const form = new formidable.IncomingForm({
    multiples: true,
    // 设置文件上传目录
    uploadDir:  path.join('../','/generator/public/images'),
    // 保持文件后缀
    keepExtensions: true
  });
  // // 解析请求报文
  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
  //   console.log('fields==>', fields);
  //   console.log('files==>', files);
  //   // 服务器保存图片的访问url
  //   let url = '/images/' + files.portrait.newFilename

  //   res.send(url);
  res.send('aa')

  });

  
})
module.exports = router;