如何在项目中高效的修改头像
在大多数的开发过程中,都有编辑个人信息的功能需求,需要能够修改头像、名称、密码等功能,其中较为繁琐的就是修改头像头像的功能。
修改头像的步骤可以分为以下几步:
1.引入组件
使用组件可以让我们的开发效率得到显著的提升,专注于功能的实现。如果是做移动端,推荐使用vant组件库中的文件上传https://vant-contrib.gitee.io/vant/v2/#/zh-CN/uploader
2.将数据转为FormData格式
上传文件必须使用formdata的数据格式
// 上传文件必须使用formdata的数据格式
let formdata = new FormData();
// 将数据添加到formdata中
formdata.append("file", file.file);
其中的formdata.append(“键名”,键值)的形式,将数据添加到formdata 中
3.调用上传文件的接口文档进行图片上传
upload(formdata).then(res => { // upload 是封装后的上传文件的接口请求
console.log(res); //打印查看formdata中的数据
let url = res.data.data.url; //获取图片的在线地址
调用接口打印数据之后,可以获取到上传图片的在线地址
4.调用修改信息接口进行修改
// 调用修改信息的接口
user_update(this.id, { head_img: url }).then(res => {
// user_update 是封装后的修改信息的接口请求
console.log(res);
if (res.data.message === "修改成功") {
this.user.head_img = url; //如果返回的数据表示修改成功,就将修改之后的图片在线地址赋值给原图片的地址
} else {
this.$toast.fail(res.data.message); //修改失败则提醒用户
}
});
以上四步就是实现修改头像的功能的解析啦。