IDEA中Spring MVC实现图片上传并显示

忘是亡心i 2022-10-29 03:22 247阅读 0赞

我们都知道web项目需要部署到tomcat服务器中运行

那么，我们又是如何通过tomcat来访问存放在本地磁盘中的图片呢？，通过tomcat访问本地图片，需要配置虚拟路径的。

**在 Tomcat 中设置 虚拟路径**

如果不配置虚拟路径，我们使用Spring MVC上传的图片就无法正常显示，我在学习使用Spring MVC上传图片时就遇到过这样的问题，图片上传成功了，但无法让图片在浏览器中显示

进入tomcat安装目录，找到conf文件夹下的server.xml文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70][]

解释：

1  path:虚拟路径 是指浏览器在访问服务器时，通过**/part\_time\_job\_university/images** 映射本地对应的图片资源真实路径。

2 doBase:本地磁盘路径，也是图片资源的绝对路径。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 1][]

在IDEA中这样配置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 2][]

打开浏览器，访问的路径应该是：[http://localhost:8080/part\_time\_job\_university/images/headerImages/202102081019269d437.jpg][http_localhost_8080_part_time_job_university_images_headerImages_202102081019269d437.jpg]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 3][]

实际服务器访问的图片路径是：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 4][]

附上上传图片时，存放到本地的实现代码,显示在网页的代码就不放了。

//上传头像
    	@RequestMapping(value = "/headerImage")
    	public void headerImage(@RequestParam(value = "file") CommonsMultipartFile file, HttpServletRequest request,
    			HttpServletResponse response) throws Exception {
    		SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
    		String respJson = null;
    		if (file == null) {
    			respJson = JsonUtil.buildFalseJson(-1, "上传文件为空!");
    			output(response, respJson);
    			return;
    		}
    		if (file.getSize() > 5000000) { // 5M
    			respJson = JsonUtil.buildFalseJson(-2, "文件大小限制在5M以内!");
    			output(response, respJson);
    			return;
    		}
    		Date now = new Date();
    		String random = UUID.randomUUID().toString().replace("-", "").substring(0, 5);
    		String houzui = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."),
    				file.getOriginalFilename().length());
    		String filename = format.format(now) + random + houzui;// 文件名
    		String path = request.getServletContext().getRealPath("/") + "headerImages" + "/" + filename;// 文件所在盘路径
    		
    		//文件名称
    		String contextPath = request.getContextPath();// 项目名
    		String port = request.getServerPort() == 80 ? "" : ":" + request.getServerPort();
    		//浏览器通过这个进行连接访问本地的图片
    		String url = request.getScheme() + "://" + request.getServerName() + port + contextPath + "/images/headerImages/"
    				+ filename;
    		localPath = localPath + "/headerImages/";
    		//必须是已经存在的文件夹了
    		File oldFile1 = new File(localPath + filename);
    		//上传文件到本地
    		file.transferTo(oldFile1);
    		respJson = JsonUtil.buildFalseJson(0, url);
    		output(response, respJson);
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70]: /images/20221024/4ee2f05c6b0044988aadde5b68776f1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 1]: /images/20221024/fed3c64554da4b3db0cbb059bc347185.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 2]: /images/20221024/3b6650fa34f54fc68d73ca281c26b28a.png
[http_localhost_8080_part_time_job_university_images_headerImages_202102081019269d437.jpg]: http://localhost:8080/part_time_job_university/images/headerImages/202102081019269d437.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 3]: /images/20221024/6d02638b48f443898c28fda2e97b5f81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 4]: /images/20221024/1aa8c04082c74498aa151c23ac14e850.png