Node.js——文件上传

文件上传

插件：formidable，地址：https://www.npmjs.com/package/formidable，参考里面with Express.js部分。

html部分截图参考：

用express-generator生成的示例代码：

const formidable = require('formidable');
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/portrait', (req, res, next) => {
  res.render('portrait');
});

router.post('/portrait', (req, res) => {
  // 文件上传请求的路由规则中
  const form = new formidable.IncomingForm();
  console.log('form=====', form);
  // form 创建表单对象
  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
    console.log('fields',fields);
    console.log('files',files);
    // res.json({ fields, files });
    res.send('ok');
  });
})

module.exports = router;

在文件上传中，可以打印fields和files。

fields 
{ username: [ '111' ] }
files
{
  "files": {
    "portrait": [
      {
        "_events": {},
        "_eventsCount": 1,
        "_maxListeners": undefined,
        "lastModifiedDate": "2024-11-01T08:29:29.712Z",
        "filepath": "C:\\Users\\xxxxx\\AppData\\Local\\Temp\\c1748ae363aa99bed12cb3700",
        "newFilename": "c1748ae363aa99bed12cb3700",
        "originalFilename": "微信图片_20220908091829.png",
        "mimetype": "image/png",
        "hashAlgorithm": false,
        "size": 453353,
        "_writeStream": "[WriteStream]",
        "hash": null,
        "[Symbol(kCapture)]": false
      }
    ]
  }
}

保存到网站根目录，一般都是public目录下：

router.post('/portrait', (req, res) => {
  // 文件上传请求的路由规则中
  const form = new formidable.IncomingForm({
    multiples: true,
    // 设置文件上传目录
    uploadDir: __dirname + '/../public/images',
    // 保持文件后缀
    keepExtensions: true
  });
  console.log('form=====', form);
  // form 创建表单对象
  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
    console.log('fields', fields);
    console.log('files', files);
    // res.json({ fields, files });
    res.send('ok');
  });
})

服务端存储图片

  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err);
      return;
    }
    // 服务器保存该图片的访问url
    let url = '/images/' + files.portrait[0].newFilename; // 后续将保存到数据库中
      res.send(url);
  });