设置头像点击上传更换

点击头像更换进行上传

<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})
	})
}
上一篇:创建vue3.0项目


下一篇:IDL-MTCK