如何在项目中高效的修改头像

如何在项目中高效的修改头像

在大多数的开发过程中,都有编辑个人信息的功能需求,需要能够修改头像、名称、密码等功能，其中较为繁琐的就是修改头像头像的功能。

修改头像的步骤可以分为以下几步：

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); //修改失败则提醒用户
          }
        });

以上四步就是实现修改头像的功能的解析啦。