JavaScript入门 文件上传中间件 Day30

前端

<!-- 上传头像 -->
<input type="file" name="headerImg" /><br/>
let headerImgFile = headerImgInput.files[0] // 文件对象
// console.log(headerImgInput.files[0]);
let formDate = new FormData()
//formDate.append('username',username)
formDate.append('headerImg',headerImgFile)
let res = await axios({
 method: 'post',
 url: 'http://10.7.162.73:3000/user/upload',
 headers:{'content-type':'multipart/form-data'},
 data: formDate,
})
console.log(res.data)

后端

安装 multer  
npm i multer

const multer = require('multer') // 1 引入multer
// const multerUpload = multer({dest:'public/upload'}) // 2. 实例化multer上传对象
const storage = multer.diskStorage({
	destination: 'public/upload',  // 存储目录
	filename: function (req, file, cb) {
		cb(null, Date.now() + '.jpg') //文件名
	},
}) // 2. 实例化multer上传对象
const multerUpload = multer({storage})
//路由使用
/**
 * 文件上传接口
 * /user/upload
 */
router.post('/upload', multerUpload.single('headerImg'), (req, res, next) => {
	console.log(req.file)
	console.log(req.body)
	res.send({
		code: 1,
		file: req.file,
		body: req.body,
	})
})