点击头像更换进行上传
<img :src="userInfo.avatar">
// type = "file" 代表要上传的是个文件
// accept = "image/*" 代表input所能接收的文件类型,我们要上传的是一个图片,
所以前面image开头是image开头的
* 代表任何类型的图片都可以 特定类型的话 image/.jpg,.png
<input type="file" accept="image/*" @change="onChangeAvater" />
// change 事件 (e)
onChangeAvater(e) {
// 对象可以把文件整理成数据提交给后台
const formdata = new FormData() //其实就是一个空对象{}
// formdata.append 有这个方法 向里面添加一个file字段 {file: 字段的值,要拿到那个input输入框,files[0]获取选中的第一张图片,files[1]获取选中的第二张图片} {file:xxxx}
formdata.append("file",e.target.files[0])
// 把参数传给我们后台的接口 http://120.53.31.103:84/api/app/img
avater(formdata).then(res => {
// res.path返回一个新的图片路径
// http://120.53.31.103:84/api/app/user
// 调用更新的接口 把最新的路径赋值给avatar
this.user({avatar:res.path})
})
}