input图片上传

input图片上传

 <label for="file" class="btn btn-default">更换头像</label>
 <input id="file" type="file" @change="getImg" accept="image/*" style="display:none" />

 export default{
	methods:{
		getImg(e){
			var fd = new FormData();//创建一个向后端传输的formdata
			var file = e.target.files[0];//获取到图片文件
			fd.append('后端规定的字段',file,file.name);
			axios({
			 		headers: {
				        'Content-Type': 'multipart/form-data'
				    },
					methods: 'PUT',
					url:url,
					data:fd
				}).then(res=>{
					console.log(res)
				}).catch(err=>{
					console.log(err)
				})
			
		}
	}
	}

.btn-default {
  font-size: 14px;
  margin-left: 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  padding: 3px 5px;
  font-size: 14px;
}