springmvc上传图片之后的显示问题

朴灿烈づ我的快乐病毒、 2022-05-13 06:40 257阅读 0赞

现在正在学习SSM框架，做了一个文件上传的功能。代码是参考的www.how2j.com上的。主要如下：  
![这里写图片描述][70]  
1.web.xml

<servlet-mapping>
            <servlet-name>default</servlet-name>
            <url-pattern>*.jpg</url-pattern>
        </servlet-mapping>

2.springmvc-servlet.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

3.upload.jsp 上传页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"%>
    
    <form action="uploadImage" method="post" enctype="multipart/form-data">
      选择图片:<input type="file" name="image" accept="image/*" /> <br> 
      <input type="submit" value="上传">
    </form>

4.UploadedImageFile.java

package pojo;
     /** *封装MultipartFile类型的字段 image ，用于接受页面的注入 * */
    import org.springframework.web.multipart.MultipartFile;
    
    public class UploadedImageFile { 
        MultipartFile image;
    
        public MultipartFile getImage() {
            return image;
        }
    
        public void setImage(MultipartFile image) {
            this.image = image;
        }
    
    }

5.UploadController 上传控制器.

package controller;
    import java.util.*;
    import java.io.File;
    import java.io.IOException;
    import javax.servlet.http.HttpServletRequest;
    import org.apache.commons.lang.xwork.RandomStringUtils;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.MultipartHttpServletRequest;
    import org.springframework.web.multipart.commons.CommonsMultipartResolver;
    import org.springframework.web.servlet.ModelAndView;
    
    
    import pojo.UploadedImageFile;
    
    @Controller
    public class UploadController {
     /** *upload 映射上传路径/uploadImage * 方法的第二个参数UploadedImageFile 中已经注入好了 image *通过 RandomStringUtils.randomAlphanumeric(10);获取一个随机文件名。 *根据request.getServletContext().getRealPath 获取到web目录下的image目录，用于存放上传后的文件。 *调用file.getImage().transferTo(newFile); 复制文件 *把生成的随机文件名提交给视图，用于后续的显示 */
        @RequestMapping("/uploadImage")
        public ModelAndView upload(HttpServletRequest request,UploadedImageFile file)
                throws IllegalStateException, IOException {
            String name = RandomStringUtils.randomAlphanumeric(10);
            String newFileName = name + ".jpg";
            File newFile = new File(request.getServletContext().getRealPath("/image"), newFileName);
            newFile.getParentFile().mkdirs();
            file.getImage().transferTo(newFile);
    
            ModelAndView mav = new ModelAndView("showUploadedFile");
            mav.addObject("imageName", newFileName);
            //System.out.println(request.getServletContext().getRealPath("/image"));
            return mav;
        }
    }

6.showUploadedFile.jsp 显示图片的页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
    
    <img src="image/${imageName}"/>

我在实践这些代码的时候，出现了一些问题。  
![这里写图片描述][70 1]  
不显示图片，而且我在我的项目里并没有找到上传了的图片，还报空指针异常的错。  
HTTP Status 500 - Request processing failed; nested exception is java.lang.NullPointerException  
![这里写图片描述][70 2]  
我开始怀疑代码是否有问题。于是重新找了一段上传图片的代码。

@RequestMapping("/uploadImage")
        public ModelAndView upload(HttpServletRequest request)
                throws IllegalStateException, IOException {
            String imgPath = null;
            //将当前上下文初始化给CommonsMultipartResolve（多部分解析器）
            CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
            //检查form中是否有enctype="multipart/form-data"
            if(multipartResolver.isMultipart(request)){
                 //将request变成多部分request
                MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
                //获取multiRequest 中所有的文件名
                Iterator iter=multiRequest.getFileNames();
                while(iter.hasNext())
                {
                    //一次遍历所有文件
                    MultipartFile file=multiRequest.getFile(iter.next().toString());
                    if(file!=null)
                    {
                    //把上传路径写死
                        String path="E:/newWork/test/image/"+file.getOriginalFilename();
                        //上传
                        file.transferTo(new File(path));
                        imgPath = file.getOriginalFilename();
                    }    
                }   
            }
            ModelAndView mav  = new ModelAndView("showUpload");
            mav.addObject("imageName",imgPath);
            return mav;
        }

这下上传文件是成功了，可还是没有显示图片，百度了一下，访问不到静态资源的问题，说是springmvc的拦截问题，尝试一大堆解决办法，都没用。后来索性下载人家的源码跑一遍，居然能显示图片了，但是我还是没有在我的项目里看到上传过来的图片，[http://:8080/test/uploadImage][http_8080_test_uploadImage]还是空指针异常。但是既然能访问到图片，那么一定存在这个文件，那也就意味着上传是成功的啊，那图片到底在哪里呢，我再看一遍代码，将request.getServletContext().getRealPath(“/image”)打印出来，  
结果是E:/NewWork/.metadata/.plugins/org.eclipse.wst.server.core/tmp1/wtpwebapps/test/image（NewWork是我的工作空间）  
这到底是个什么东西呢？我百度了一下，在通过启动tomact运行工程时，eclipse会将工程发布到该文件夹中，就像发布到tomact中一样。可能是我在配置tomact时，默认把服务器路径设为这个文件夹了吧。可以修改过来，改到tomact安装目录下的webapps文件夹下。可能会更容易理解了。  
![这里写图片描述][70 3]  
因此我们知道项目访问的图片肯定是从发布到tomact里的项目文件里去找，request.getServletContext().getRealPath(“/image”)就是找到tomact里项目的路径，第一次没有显示成功图片，那可能是发布到tomact里的项目没有更新，以至于工作空间的文件内容与tomact中的不一致。  
第二段换掉的代码更不可能访问到图片了，因为我把上传路径写死到工作空间的项目文件夹下，而不是tomact服务器，当然会找不到。所以上传文件就不应该将路径写死，用request.getServletContext().getRealPath(“/xxxxx”)会更好。

[70]: /images/20220513/3ad13fa66e72454a8f494efea3488c73.png
[70 1]: /images/20220513/a083405e55c6427e86d490585b02ab69.png
[70 2]: /images/20220513/31dc2128cffb48639f4fbcfb765287ee.png
[http_8080_test_uploadImage]: http://:8080/test/uploadImage
[70 3]: /images/20220513/39604ed3586e40f880bffaf456925478.png