使用 element-ui 组件 upload 上传用户头像

1. api 接口核心代码

// 更新用户头像的操作函数
exports.updateAvatar = (req,res)=>{// 定义sql ：根据用户 id 更改 头像const sql = 'update users set avatar = ? where id =?'// 头像在服务器端的存放路径const img = path.join('/uploads', req.file.filename)db.query(sql,[img,req.user.id],(err,result)=>{if(err) return res.cc(err)if(result.affectedRows !== 1) return res.cc('更新头像失败！')res.cc('更新头像成功',0)})
}

2.  文件上传代码

         
点击上传头像

3. 验证图片格式

// 验证上传的图片文件beforeAvatarUpload (file) {// 判断图片格式是否合格const isLt2M = file.size / 1024 / 1024 < 2if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!')}return isLt2M},

4. 调用接口修改头像

// 调用接口上传用户头像async uploadFile (item) {const formData = new FormData()// 这里要注意了，‘avatar’ 这里 要看 api 接口那边传的文件参数名称是什么，这里就写什么// 我就是在这里耽误很长的时间formData.append('avatar', item.file)const res = await uploadFile(formData)if (res.status !== 0) {return this.$Message.error('修改头像失败！')}this.$Message.success('修改头像成功！')},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！