页面处理

在form表单添加enctype属性，并赋值为multipart/form-data，即可实现文件提交

1
2
3
4
5
6
<form action="/" method="post" enctype="multipart/form-data">
    <input type="text" name="name"><br>
    <input type="text" name="age"><br>
    <input type="file" name="img"><br>
    <input type="submit" value="提交">
</form>

ajax提交请求

这里有三个参数要注意，一个是data，它可以将文件数据传至服务端，processData和contentType在注释中有相关说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('form').on('submit', function (e) {
  $.ajax({
    url: $(this).attr('action'),
    type: $(this).attr('method'),
    data: new FormData($(this)[0]),
    processData: false,  // tell jQuery not to process(处理) the data
    contentType: false,  // tell jQuery not to set contentType，在这里jQuery 会默认把 Content-Type 设置为 application/x-www-form-urlencoded; charset=UTF-8
    success: function (data) {
      if (data.err_code === 0) {
        window.location.href = '/advert'
      }
    }
  })
  return false
})

formidable解析表单请求体

安装

1
npm i --save formidable

引入模块

1
const formidable = require('formidable')

解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
app.post('/', (req, res, next) => {
  const form = formidable({ multiples: true })
  form.uploadDir = './upload' //默认存储路径
  form.keepExtensions = true // 配置保持文件原始的扩展名
  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err)
      return
    }
    // res.json({ fields, files })
    console.log(fields) //请求体字段显示
    console.log(files) //文件信息，files.image.path为图像文件路径，这时可以用path.basename将图像名字保存至数据库
  })
})

该中间件的其它相关操作可以参考这篇文章 https://www.cnblogs.com/abab301/p/9489000.html