在项目中我们经常会遇到一些上传或者修改用户头像

• 下面我为大家说一下上传、修改用户头像的方法

手写input的方法

1、手写上传的input按钮

<input  type='file'  accept="image/*"  @change='change'>上传本地文件

• type 类型，表示是一个上传文件的input

• accept 上传的类型，代表是图片

• @change 在选中文件之后触发

2、对应的change事件

 change(e) {
 
     // 手写的input需要一个对象将本地图片转换为对应的格式来上传
      let formData = new FormData();
 
     // e.target.files就是选中的文件的一个数组
      formData.append("file", e.target.files[0]); 
 
     // 将formData这个对象传给修改头像的接口
      updateImg(formData).then(res => {
 
        if (res.code == 200) {
          Toast(res.msg);
 
    //  res.data.path就是返回的头像网址，具体还要看返回的数据
          this.userData.avatar = res.data.path;
 
     // 有些项目需要将请求成功的图片网址，发修改数据接口，具体看后台的处理
          updateUser({ avatar: res.data.path });
 
        } 
      });
 
    },

对应的input的样式修改

DOM结构

<a href="javascript:;" class="file">选择文件
    <input type="file" name="" id="">
</a>

css结构

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

• 修改后的样式如下图
• 

vant的Uploader组件的使用

1、使用 这里是基础用法

<van-uploader :after-read="afterRead" />

2、文件上传

 methods: {
 
    afterRead(file) {
 
     // file就是上面的手写input中，经过FromData包装过后的那个图片地址，可以直接上传至服务器
 
      updateImg(file).then(res => {
        if (res.code == 200) {
          Toast(res.msg);
 
    //  res.data.path就是返回的头像网址，具体还要看返回的数据
          this.userData.avatar = res.data.path;
 
     // 有些项目需要将请求成功的图片网址，发修改数据接口，具体看后台是否有过处理
          updateUser({ avatar: res.data.path });
 
        } 
      
    },
 
  },

注意事项：

1.手写input需要使用一个FormData对象来转换格式，而vant的file是已经转换好的

2.这个转换过的格式，就是一个对象，直接将整个对象当成data参数传递即可，具体情况看项目接口而定

3.传递过后，后台会返回数据，其中的data.path就是修改后的头像的网址链接

4.有些项目如果后台没有处理的话，需要我们再次将这个头像网址，传递给修改用户信息的接口，已达到修改头像的目的