我的个人博客

记录我的学习心路历程

0%

716_express框架_文件上传和保存

发表于 更新于 分类于 
var express = require('express');
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) => {
  //创建 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(fields);// text  radio  checkbox  select
    // console.log(files); // file
    
    //服务器保存该图片的访问 URL
    // /images/8ad3d5e36012212ba7642c000.jpg
    let url = '/images/' + files.portrait.newFilename;// 将来将此数据保存在数据库中
    
    res.send(url);
  });
});

module.exports = router;
<!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>
  <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>