前端js部分
changeEvent (e) { ------ //change事件方法
let oFile = e.target.files[0] ------ //获取文件对象
let param = new FormData() ------ //new一个formData
param.append(‘file‘, oFile, oFile.name) ------ //将文件添加到formdata中
param.append(‘chunk‘, ‘0‘)
let config = {
headers: {‘Content-Type‘: ‘multipart/form-data‘}
}
this.axios.post(‘/api/upload/upavatar?username=‘ + username, param, config) ------//传输数据
.then(response => {
if (response.data.data === 1) { ------ //成功后的回掉
let instance = Toast({
message: ‘头像更改成功‘
})
setTimeout(() => {
instance.close()
}, 1000)
}
})
}
NodeJS部分
需要引入formidable、path模块
router.post(‘/upavatar‘, function (req, res, next) {
var form = new formidable.IncomingForm()
form.uploadDir = path.normalize(__dirname + ‘/../public/images/avatar‘) ------图片上传目录
form.parse(req, function (err, fields, files) {
var oldpath = files.file.path
var newpath = path.normalize(__dirname + ‘/../public/images/avatar‘) + ‘\\‘ + req.query.username + ‘.png‘ -------//给上传的图片重命名
fs.rename(oldpath, newpath, function (err) {
if (err) {
res.send(‘-1‘)
return
}
if (newpath) {
let avatarPath = ‘server/public/images/avatar/‘ + req.query.username + ‘.png‘ ------//存入数据库的图片地址(相对于页面)
db.updateMany(‘users‘, {‘username‘: req.query.username}, {$set: {avatar: avatarPath}}, function (err, result) { ------//更新数据库的头像地址
if (err) {
res.send(‘-2‘)
return
}
res.json({data: 1})
})
}
})
})
})