vue使用vant上传图片到服务器(vue修改头像)
html代码:<!-- vant代码 --><van-uploader :after-read="Uploader" ><img width="37px" :src="data.avatar" alt=""></van-uploader>用到vant的api函数 after-read文件读取完成后的回调函数methods代码:methods: {//
·
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)
// });
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)