html代码:

<!-- vant代码 -->
<van-uploader :after-read="Uploader" >
     <img width="37px" :src="data.avatar" alt="">
</van-uploader>

用到vant的api函数 after-read 文件读取完成后的回调函数

methods代码:

methods: {
    // 上传图片
    Uploader(e){
      console.log(e)
      let content = e.file;
      
      let data = new FormData();
      // FormData 对象的使用:
      // 1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成一个queryString
      // 2. 异步上传二进制文件。
      //上传图片需要转换二进制这里要用到FormData
      
      data.append('file',content);
      //这里的file表示给后台传的属性名字,这里看接口文档需要传的的属性
      
      upimg(data).then(res=>{
      //upimg是封装的请求方法,这里自己改一下就可以,没封装可以用this.$axios
      
        console.log(res)
        //res返回上传的图片的路径等信息
        
        //调用更新用户资料接口更改用户信息
        edituser({avatar:res.path}).then(res=>{
          console.log(res)
        })
      })

      //axios请求方法
      // this.$axios.post("图片上传地址", data).then((res) => {
      //   console.log(res)
      // });     
    }
  },
Logo

前往低代码交流专区

更多推荐