vue前后台分离上传图片到服务器

需求：前台vue实现，后台springboot实现，前台选择图片上传到后台指定目录，数据库中保存图片访问路径，前天通过url的访问路径显示图片；

实现代码前台：

<el-input v-model="form.img" auto-complete="off" disabled></el-input> <!-- 显示路径 -->
<input accept="image/*" name="upimage" @change="upload" id="upload_file" type="file"> <!-- 选择图片 -->

data () {
	return {
		form: {
			img: ""
		}
	};
}

upload (e) {
	let file = e.target.files[0];
	let param = new FormData();
	//通过append向form对象添加数据
	param.append("file", file);
	let config = {
		headers: {
		  'Content-Type': 'multipart/form-data'//必须要指定
		}
	};
	axios.post("/UpLoad/UploadImage", param, config).then(response => {
	  //console.log(response)
	  this.form.img = response;
	});
},

后台：

@PostMapping ("/UploadImage")
public String UploadImage(MultipartFile file) {

	String path = Thread.currentThread().getContextClassLoader().getResource("static/images").getPath();//本地资源路径
	try {
		file.transferTo(new File(path, file.getOriginalFilename()));
	} catch (IOException e) {
		e.printStackTrace();
	}
	return "/images/" + file.getOriginalFilename();//保存成功后返回路径
}

效果图片：

 祝好运！