发送表单信息,类型为"Content-Type":"multipart/form-data",其中表单内有头像数据信息。
userFormRef.value.validate((valid)=>{ const params = new FormData() for(let i in userForm){ params.append(i,userForm[i]) } if(valid){ axios.post("/adminapi/user/upload",params,{ headers:{ "Content-Type":"multipart/form-data" } }).then(res=>{ console.log(res.data) }) // console.log(params) } })
数据信息存储:
userForm.avatar = URL.createObjectURL(file.raw)
userForm.file = file.raw
useRouter
后端采用‘multer’处理接收,将file中的数据存入至upload指定dest位置UserController
const multer = require('multer') const upload = multer({ dest: 'public/avataruploads/' }) UserRouter.post("/adminapi/user/upload",upload.single('file'), UserController.upload)
UserController
获取/avataruploads中图片的文件名赋值给avatar
//更新用户信息
upload:async (req,res) => {
const token = req.headers["authorization"].split(" ")[1]
// console.log(req.body,req.file)
const {username,introduction,gender} = req.body
const avatar = `/avataruploads/${req.file.filename}`
var payload = JWT.verify(token)
await UserService.upload({
_id:payload._id,
username,
gender:Number(gender),
introduction,
avatar
})
res.send({
ActionType:"OK"
})
}