本文共 2071 字，大约阅读时间需要 6 分钟。

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

前端

如何获取文件呢？

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);

修改图片大小

第一个参数是源文件， 最后一个是目标文件。

转载地址：http://uuern.baihongyu.com/