想实现用户更换头像的功能,现在实现了一个用户选完头像后,点击确认,就能更改头像,但是如果登录另一个账号头像还是刚刚改的那个头像,也就是说那个avatar里面只存了一张图片,我更改图片就只是那个图片换来换去,没有保存其它图片。。怎么做才能存储不同图片,然后登录不同账号会有对应的头像。
这是我的HTML代码,通过点击"dianwo"确认传到后台
uploadHeadImg(){
this.$el.querySelector('.hiddenInput').click()
},
handleFile(e){
let $target = e.target || e.srcElement //调用它的各种属性
let file = $target.files[0]
var reader = new FileReader()
reader.onload = (data)=>{
let res = data.target || data.srcElement
this.userInfo.avatar = res.result
}
reader.readAsDataURL(file)
},
dianwo(){
if(this.$refs.avatarInput.files.length !== 0){
// console.log(this.$refs.avatarInput.files[0])
var image = new FormData()
image.append('avatar',this.$refs.avatarInput.files[0])
image.append('username',this.name)
this.$axios.post('/touxiang',image,{
headers:{
"Content-Type":"multipart/form-data"
}
})
.then((res)=>{
console.log(res)
})
}
}
这是后台代码。
router.post('/touxiang',function(req,res,next){
let form = new formidable.IncomingForm()
form.parse(req,function(err,fields,files){
if(err){
return next(err)
}
let extname = path.extname(files.avatar.name)
let oldpath = files.avatar.path;
let newpath = '../static/assets/avatar/avatar'+extname;
let avatarName = 'avatar'+extname;
fs.rename(oldpath,newpath,function(error){
if(error){
console.log(error)
}
})
new Touxiang({
photo:avatarName
}).save(function(error,result){
if(error){
console.log(error)
}
res.json('done')
})
})
})
Touxiang 的Schema有 photo 和 created_time
提供下思路,首先上传图片之后,图片存在服务器上,然后生成一个访问路径,这个应该是个唯一的。再一个同时要确保更新下数据库,也就是要将这个头像的绝对路径和你当前登录的用户的唯一标识保持一一对应关系。