vue中图片头像上传操作流程

前言： 首先我采用的是vant-ui中Uploader 文件上传，然后在按需引入我们用到的组件，之后找到自定义上传样式 通过默认插槽可以自定义上传区域的样式。把它写入到我们的html里

<!-- 头像 -->
    <van-popup v-model="show" position="bottom">
      <div class="img">
        <div>拍照</div>
        <div>
          从手机相册选择
          //van-ui中组件 start
          <van-uploader :after-read="read">
            <van-button icon="plus" type="primary">上传文件</van-button>
          </van-uploader>
          //end
        </div>
        <div @click="onProp">取消</div>
      </div>
    </van-popup>

引用之后的效果 接下来我会在network文件夹中去封装需要用到的img接口

userimg: /app/public/img, //用户头像信息
datas: /app/user, //时间
user_info: /app/userInfo, //个人信息

然后在/network/index.js

然后给它添加一个事件在methods中写

//  上传头像
    read(file) {
          
   
      let fn = new FormData();
      fn.append("file", file.file);
      this.$API.userimg(fn).then((res) => {
          
   
        console.log(res);
        this.$API.datas({
          
    avatar: res.data.data.path }).then((res) => {
          
   
          console.log(res);
          this.$API.user_info().then((res) => {
          
   
            console.log(res);
            this.personal = res.data.data;
          });
        });
      });
    },
  },