vue的框架vant中的upload上上传头像操作

参考[官网对应链接] (https://youzan.github.io/vant/#/zh-CN/uploader)可查看具体使用方法

1、按照官网方法引入对应的组件

import Vue from 'vue';
import { Uploader } from 'vant';
Vue.use(Uploader);

2、直接使用基础用法模块

<van-uploader :after-read="afterRead" />
export default {
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};

3、在上传完成后我们需要获取文件对象并上传至服务器,此处利用的是after-read属性完成，

获取对象之后转为Formdata,接着调用接口上传，注意，目标对象是file.file一般情况下后台会返回图片地址，此时我们就可以引用了
完整代码如下

<van-uploader :after-read="afterRead" />
export default {
  methods: {
     async afterRead (file) {
      const fd = new FormData()
      fd.append('file', file.file)
      const res = await upload(fd)
      this.userInfo.head_img = this.$axios.defaults.baseURL + res.data.data.url
      //   console.log(file.file.name)
      console.log(res)
    }
  },
};