vue上传单张图片

之前写了一个上传多张的，今天又用到上传图片，但是只需要单张上传，就把循环去掉了，也没有用插件，普通form对象。

html:

<form class="management_cent">
					<label class="flex">
						<div class="data_management_left">头像</div>
						<div class="data_management_right flex">
							<div class="flex header_img">
								<img :src="head_img" alt="..." />
							</div>
							<img src="img/icon22.png" alt="..." class="arrow_img" />
						</div>
						<input type="file" name='pics' accept="image/*" class="hide" @change="doUpload_click" />
					</label>
				</form>

Js:

doUpload_click(e) {
							// 上传图片
							let that = this;
							let file_val = e.target.files[0];
							let imgFile = new FormData();
							imgFile.append('fileType', 'IMAGE')
							imgFile.append('file', file_val);
							imgFile.append('filename', 'pics');
							imgFile.append('pics', file_val);
							axios({
									method: 'post',
									url: href_val + '/upload/image',
									headers: {
										'Authori-zation': 'Bearer ' + token
									},
									data: imgFile
								})
								.then(res => {
									console.log("上传图片结果", res.data.data)
									if (res.data.status == 200) {
										that.head_img = res.data.data.url;
										localStorage.head_img = res.data.data.url;
									} else {
										that.$toast(res.data.msg);
									}
								}).catch(function(error) {
									that.$toast('接口错误');
								});
						}