很久没写博客了,来一篇吧
老板提出需求,上传图片到服务器然后在前端页面展示,然后写了一个小Demo,测试一下
前端html简单代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
</script>
</head>
<body>
<form action="http://xx.xx.xx.xx:xxxx" method="post" enctype="multipart/form-data">
<input type="file" name="pic" />
<input type="submit" />
</form>
</body>
</html>
Java代码如下:
@ResponseBody
@RequestMapping("uploadPic")
public String imgUpdate1(@RequestParam(value = "pic", required = false) MultipartFile file) {
// 获取文件名
String fileName = file.getOriginalFilename();
log.info("上传的文件名为:" + fileName);
// 获取文件的后缀名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
log.info("上传的后缀名为:" + suffixName);
// 文件上传后的路径
String filePath = "E:\\pic\\";
String se = filePath + fileName;
File dest = new File(se);
// 检测是否存在目录
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
try {
file.transferTo(dest);
return se;
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return se;
}
然后测试,结果不理想,直接nullpoint空指针异常,提示
查看日志,发现
String fileName = file.getOriginalFilename();
这一行获取不到数值,然后开始问度娘,第一种说法说的是@RequestParam(value = “pic”)这个value参数参数跟前端页面的form表单中的name不一致,好吧,果断改为pic,然后错误依旧是空指针,然后又百度,又找到一个答案,说前端页面上传页面没有参数enctype=“multipart/form-data”,好吧,写后台的我对前台这个参数不清楚,但是查了一下发现上传文件必备的参数,好吧学到了,然后改了一下,返回了图片路径,
这个路径是图片的绝对路径,等后期如果前台需要改为图片网址的话还需要修改,这里只是测试,然后打开服务器的那个设置的文件存储路径,效果如下
服务器上存上来了,图片果然上到服务器了,接下来就是存储图片路径到数据库,然后让前台展示出来,
未完待续。。。。。。。。。