前端上传图片（文件）到后端

前端上传图片（文件）到后端

前端
如何获取文件呢？

<input id="categoryPic" accept="image/*" type="file" name="image" @change="getFile($event)" />

1.accept=“image/*” 指只接收图片，不限jpg和gif
2.@change="getFile($event) 里面的 $event 应该是当前事件的对象

getFile: function (event) {
       this.file = event.target.files[0];
       alert(this.file.name);
   }

然后取出文件数组的第一个文件就是你想要上传的文件了， 将其赋值到Vue结构里面， 函数就可以拿来用了。

update:function(){
  	if(!checkEmpty(this.bean.name, "分类名称"))
  		return;
  	var url = this.uri + "/" + this.bean.id;
  	var formdata = new FormData();
  	
  	formdata.append("name", this.bean.name);
  	formdata.append("image", this.file);
  	
  	axios.put(url, formdata).then(function(response){
     		location.href = vue.listURL;
    });
}

重点是 new 一个 FormData 类， 这个类储存数据的方式有点像 Map,
把得到的文件(图片)和其他数据 append 到里面来
（注：这里是用 vue 写的前端）

后端

/*
	 * @Transactional事务回滚
	 * 回滚: 如果你之前的代码执行了，后面却出现错误， 就要撤销之前的更改 
	 */
	@Transactional
	@PutMapping("/categories/{id}")
	public Category update(@PathVariable("id") int id, MultipartFile image, String name, HttpServletRequest request) throws IOException{
		Category c = new Category();
		c.setId(id);
		c.setName(name);
		categoryService.update(c);
		
		if( image!=null )
			saveOrUpdateImageFile(c, image, request);
		
		return c;
	}

1.MultipartFile image 是用来接收图片（文件）的；
2.HttpServletRequest request 是得到请求路径， 方便在项目目录下储存图片
3.@PathVariable(“id”) int id 是接收映射路径的 id , 不是 FormData里面的

//保存上传的图片
	public void saveOrUpdateImageFile(Category bean, MultipartFile image, HttpServletRequest request)
			throws IOException {
		File imageFolder= new File(request.getServletContext().getRealPath("img/category"));
		System.out.println("RealPath:" + request.getServletContext().getRealPath("img/category"));
		File file = new File(imageFolder,bean.getId()+".jpg");
		//如果父目录不存在则创建一个父目录
		if(!file.getParentFile().exists())
			file.getParentFile().mkdirs();
		System.out.println("first: "+ file.length());
		//将图片赋予该新创建的文件中
		image.transferTo(file);
		System.out.println("change: "+ file.length());
		BufferedImage img = ImageUtil.change2jpg(file);
		ImageIO.write(img, "jpg", file);
	}

ImageUtil.resizeImage(file, 56, 56, f_small);
			ImageUtil.resizeImage(file, 217, 190, f_middle);

修改图片大小
第一个参数是源文件， 最后一个是目标文件。