Node.js 利用express + multer实现文件上传

上篇文章我们处理了 appliction/json以及application/x-www-form-urlencoded格式的请求参数

这篇文章我们处理 multipart/form-data格式参数，主要利用express的中间件multer

multer是专门用来处理通过表单文件上传，格式为multipart/form-data，并且支持个性化设置

客户端选择图片调用上传接口

<template>
   <input type="file" @change="uploadImg($event)">
</template>

// 上传方法
uploadImg(e){
  if(!e.target.files.length) return
  let formData = new FormData()
  formData.append('file',e.target.files[0])
  axios({
    url:'/api' + '/upload', // 不同端口存在跨域
    method:'post',
    data:formData,
    headers:{
      'Content-Type':'multipart/form-data' // 指定form-data格式
    }
  }).then(res => console.log(res))
}

服务端利用中间件multer处理

let express = require('express')
let router = express.Router()
let multer = require('multer') // 引入multer中间件
let upload = multer({dest:'upload/'}) // 单个文件上传目录

// 这里的file表示前端上传文件参数名
router.post('/upload', upload.single('file'), (req, res) => {
	res.send('success')
})

至此，一个简单的上传文件就成功了，但是会发现文件没有后缀名，并且名称是随机生成的

接下来，我们使用个性化配置

let express = require('express')
let router = express.Router()
let multer = require('multer')

let Storage = multer.diskStorage({
	destination: (req, file, callback) {
		callback(null,'./upload') // 指定目录 /upload
	},
	filename: (req, file, callback){
		callback(null, file.fieldname + "_" + Data.now() + "_" + file.originalname) // 指定文件名称
	}
})

// 支持多文件上传，上传名为file
let upload = multer({storage:Storage}).array('file', 3)

// 上传接口
router.post('/upload', (req, res) => {
	upload(req, res, err => {
		if (err) throw err
		res.send('success')
	})
})

至此，我们就实现了 form-data表单上传