图片上传并显示

单张图片上传

<img :src="userInfo.avatar">
// type="file" 代表要上传的是个文件
// accept="image/*" 表示input所能接受的文件类型,我们要上传的是一个图片，所以前面是image开头的 * 代表任何类型的图片都可以 特定类型的话 image/.jpg,.png
// change事件是在找到图片之后点击确定/打开的时候才触发的
<input type="file" accept="image/*" @change="onChangeAvater"/>
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})
	})
}