前端上传图片(文件)到后端
前端上传图片(文件)到后端前端如何获取文件呢?<input id="categoryPic" accept="image/*" type="file" name="image" @change="getFile($event)" />1.accept=“image/*” 指只接收图片,不限jpg和gif2.@change="getFile($event) 里面的 $even...
·
前端上传图片(文件)到后端
前端
如何获取文件呢?
<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);
修改图片大小
第一个参数是源文件, 最后一个是目标文件。
更多推荐
已为社区贡献1条内容
所有评论(0)