【2020年】IDEA中解决SSM框架图片上传不能立刻回显的问题

2024-05-31 07:24| 来源: 网络整理| 查看: 265

今天写毕设设计的时候遇到了一个问题，我在上传用户头像时，明明已经上传到文件夹中，但是无法回显到浏览器，访问资源提示404错误，于是写一篇博文来记录下整个过程。

1.上传头像的实现过程

我的构想是，通过点击用户的头像来触发选择图片的事件，之后选择更换头像提交按钮来提交，并在提交之前进行回显。图片如下：

1.1 HTML部分代码

1.2 JS部分代码

// 上传头像事件，通过点击头像触发选择本地图片的事件 $('#userPhoto').click(function () { $('#choosePhoto').click(); // 隐藏的input触发点击事件，来选择图片 }); // 检测表单是否有数据需要提交 function checkForm() { if($('#choosePhoto').val() == ""){ return false; }else { return true; } } // 头像预览 $("#choosePhoto").change(function () {// input[file]的ID var url = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径 console.log("url:"+url); if (url) { $("#userPhoto").attr("src", url); //将图片路径存入src中，显示出图片 } }); //建立一个可存取到这个file的url function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { //basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }

1.3 POM.xml配置

commons-fileupload commons-fileupload 1.3.1 commons-io commons-io 2.4

1.4 controller配置

// 上传头像 @RequestMapping(value ="/uploadHead",method = RequestMethod.POST) public String addUser(HttpServletRequest req,MultipartFile pictureFile) throws Exception{ //使用UUID给图片重命名，并去掉四个“-” String name = UUID.randomUUID().toString().replaceAll("-", ""); //获取文件的扩展名 String ext = FilenameUtils.getExtension(pictureFile.getOriginalFilename()); System.out.println("文件拓展名："+ext); //设置图片上传路径 String realPath = req.getServletContext().getRealPath("upload/photo"); System.out.println("项目路径："+realPath); String url = "E:/Workspace/IDEAWorkspace/wecode/web/upload/photo"; System.out.println("保存路径"+url); //以绝对路径保存重名命后的图片 pictureFile.transferTo(new File(url+"/"+name + "." + ext)); //把图片存储路径保存到数据库 String relativeUrl ="upload/photo/"+name + "." + ext; userService.modifyUserPhotoById(userId,relativeUrl); return "redirect:/profile.html"; } 2.图片上传成功，但是需要重新部署服务器问题解决

图片成功上传之后，出现了一个问题：文件夹中已经显示图片了，但是访问图片资源会出现404错误，再重新启动服务器之后，发现这个错误又消失了。

因此我认为这个BUG的可能是由于tomcat服务器引起的，我通过读取项目的真实路径会发现，静态资源在tomcat中一开始部署的时候就已经加载了，因此我们在后续上传文件之后，由于图片不在out文件之中，所以无法获取到头像资源。

2.1解决方法如下：

在tomcat中配置中，将图片所在的文件夹添加至tomcat中：

最重要的一点！！！！一定要勾选！！！

然后就解决了这个问题。

【本文地址】

公司简介

联系我们