express实现文件上传

• express使用multer插件
• 自定义multer配置
• multer实现多字段文件上传

express使用multer插件

在不使用三方中间件的情况下，虽然可以使用form表单上传文件，但是无法将文件保存到静态文件资源目录中去

• 第一步：安装multer；npm install multer --save
• 第二步：引入multer; const multer = require('multer')
• 第三步：实例化multer
• 第四步：在路由中使用

使用multer的时候，需要在form表单上配置enctype="multipart/form-data"
multer配置的文件存储路径，必须要存在，否则会报错
单文件上传，使用upload.single函数，结果返回到req的file字段中
多文件上传，使用upload.array函数，结果返回到req的files字段中

const upload = multer({dest: './public/uploads'})

// single函数的参数是form表单文件提交的字段
app.post("/file/upload", upload.single('avatar'), (req, res) => {
    const { body, file } = req
    res.send(body, file)
})

// array函数的参数是form表单文件提交的字段，以及设置文件上传的个数，
// 设置的文件上传一定要大于实际上传的文件的个数，否则会报错
app.post("/file/upload", upload.array('avatar', 12), (req, res) => {
    const { body, files } = req
    res.send(body, files)
})

自定义multer配置

利用multer的配置，可以实现按照日期动态生成文件夹，并修改默认上传文件的文件名和格式
需要引入path，mkdirp，以及silly-datetime插件的支持

const path = require('path')
const mkdirp = require('mkdirp')
const sd = require("silly-datetime")
const storage = multer.diskStorage({
    destination: async function (req, file, cb) {
        // 1. 获取当前日期
        let day = sd.format(new Date(), "YYYYMMDD")

        // 2. 拼接目录
        let dir = path.join("./public/uploads", day)

        // 3. 按照日期生成图片存储目录 mkdirp是异步方法
        await mkdirp(dir)

        cb(null, dir)
    },
    filename: function (req, file, cb) {
        // 1. 获取文件后缀名
        let extName = path.extname(file.originalname)
        // 2. 根据时间戳生成文件名
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
        cb(null, file.fieldname + '-' + uniqueSuffix + extName)
    }
})
const upload = multer({ storage: storage })

multer实现多字段文件上传

利用upload.fields可以接受多个字段的文件上传

<form action="/doUpload" method="post" enctype="multipart/form-data">
    标题：<input type="text" name="title">
    <br>
    图片1：<input type="file" name="pic1" id="pic1" multiple>
    <br>
    图片2：<input type="file" name="pic2" id="pic2" multiple>
    <br>
    内容：<textarea name="desc" id="desc" cols="30" rows="10"></textarea>
    <br>
    <button type="submit">提交</button>
</form>

app.post("/doBatchUpload", upload.fields([
    { name: 'pic1', maxCount: 1 },
    { name: 'pic2', maxCount: 8 }
  ]), (req, res) => {
    // files的数据结构
    // files: {
    //     'pic1': [{}],
    //     'pic2': [{}, {}]
    // }
    res.send({
        body: req.body,
        files: req.files
    })
})