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

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

1.上传头像的实现过程

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

1.1 HTML部分代码

<form action="user/uploadHead" method="post" enctype="multipart/form-data" οnsubmit="return checkForm()">
    <input id="choosePhoto" type="file" name = "pictureFile"/><br>
    <img id="userPhoto">
    <input id="doChangePhoto" type="submit" class="btn btn-dark" value="更换头像"></input>
</form>

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配置

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>

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中：

 

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

然后就解决了这个问题。