Express下使用formidable实现POST表单上传文件并保存

Express下使用formidable实现POST表单上传文件并保存

在上一篇文章中使用formidable实现了上传文件，但没将它保存下来。

一开始，我也以为是只得到了文件的相关信息，需要用fs.writefile模块写文件，但事实上，formidable已经帮我们做了这件事！

从官方文档中，就可以看到，formidable有一个uploadDIr的属性，它有一个默认属性是系统的临时文件夹。因此它默认就上传保存到了系统的默认目录下，有心的话，我们可以到用户目录下看临时文件夹temp下就可以看到上传的那些图片。

为了让它上传到项目目录下，你需要做的只是修改这个uploadDir属性！如下代码：

PUG页面代码

doctype html
html
  form(action="/ex_post" method="POST" enctype="multipart/form-data")
    label(for="fieldName") 名字:
    input(type="text" id="fieldName" name="name")
    label(for="fieldEmail") 邮箱:
    input(type="email" id="fieldEmail" name="email")
    input(type="file" name="avatar")
    input(type="submit" value="提交")

Express 代码实现

const express = require("express")
const bodyParser = require("body-parser")
// 解析带文件上传的表单需要
const formidable = require("formidable")
const path = require("path")

const app = express()
let port = process.env.port || 3000
app.use(express.static(path.join(__dirname, "/public")))
app.set("view engine", "pug")
app.use(bodyParser.urlencoded({ extended: true }))
app.get("/", (req, res) => {
  res.render("post",{})
})
app.post("/ex_post", (req, res) => {
  var form = new formidable.IncomingForm()
  form.uploadDir = "./public/img" // 上传目录
  form.keepExtensions = true
  form.parse(req, function(err, fields, files) {
    if (err) return res.redirect(303, '/error')
    let response = {
      fields,
      files,
      msg: `成功上传至${uploadDir}`
    }
    res.send(response)
  })
})
app.listen(3000, () => {
  console.log(`running on port: ${port}`)
})

最后，你可以在public/img目录下发现刚上传的文件。