SSM实现图片本地上传并保存到本地磁盘中

功能描述

实现房屋租赁网站中添加房屋信息的功能。其中add.jsp页面是一个表单提交信息——添加房屋

首先输入房屋的相关信息，并上传房屋的图片。上传成功后会将图片的名字添加到数据库中
成功后跳转到success.jsp，从数据库读取房屋的图片路径，并显示

add.jsp

<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>公寓管理系统 - 房屋信息添加</title>
	<link rel="stylesheet" href="../../css/main.css">
	<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.css">
</head>
<body>
<div class="box">
	<h3>添加房屋信息</h3>
	<form action="${pageContext.request.contextPath}/house/add" method="post" enctype="multipart/form-data">
	<table class="form-table">
		<tr>
			<td>地区</td>
			<td colspan="3" class="control">
				<input type="text" name="address" placeholder="填写地区">
			</td>
		</tr>
		<tr>
			<td>楼层</td>
			<td colspan="3" class="control">
				<input type="text" name="floor" placeholder="楼层">
			</td>
		</tr>
		<tr>
			<td>房间号</td>
			<td colspan="3" class="control">
				<input type="text" name="roomNum" placeholder="房间号">
			</td>
		</tr>
		<tr>
			<td>面积(平米）</td>
			<td colspan="3" class="control">
				<input type="text" name="area" placeholder="面积">
			</td>
		</tr>
		<tr>
			<td>朝向</td>
			<td colspan="3" class="control">
				<input type="text" name="dir" placeholder="朝向">
			</td>
		</tr>
		<tr>
			<td>装修类型</td>
			<td colspan="3" class="control">
				<select name="deco">
					<option value="1">毛坯</option>
					<option value="2">精装</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>是否双气</td>
			<td colspan="3" class="control">
				<select name="air">
					<option value="1">是</option>
					<option value="2">否</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>价格(元/月)</td>
			<td colspan="3" class="control">
				<input type="text" name="price" placeholder="价格">
			</td>
		</tr>
		<tr>
			<td>出租状态</td>
			<td colspan="3" class="control">
				<select name="rentStatus">
					<option value="1">已出租</option>
					<option value="2">未出租</option>
					<option value="3">停止出租</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>房屋图片</td>
			<td colspan="3" class="control">
				<input type="file" name="houseImage" placeholder="选择图片">
			</td>
		</tr>
	</table>
	<div class="buttons">
		<input class="btn btn-primary va-bottom" type="submit" value="保存">&nbsp;&nbsp;
		<a class="btn btn-default" href="javascript:history.go(-1)">返回</a>
	</div>
	</form>
</div>
</body>
</html>

注意：

enctype="multipart/form-data"：指表单数据有多部份构成，既有文本数据，又有文件等二进制数据的意思。只有multipart/form-data才能完整的传递文件数据
输入框中的name="houseImage"要与后台的MultipartFile类型的属性名要一致，且不能和实体类house中表示图片的属性名相同

首先要注入依赖

 <!--图片上传-->
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.3</version>
    </dependency>

在SpringMVC中配置：

    <!--文件上传-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="104857600"/>
        <property name="defaultEncoding" value="utf-8"/>
        <property name="maxInMemorySize" value="40960"/>
    </bean>

HouseController

    @RequestMapping("/add")
    public String add(House house, MultipartFile houseImage, HttpServletRequest request) throws IOException {
        house.setAddTime(LocalDateTime.now());
        house.setUpdateTime(LocalDateTime.now());
        if (houseImage.getSize() != 0) {
            String path = "D:\\Soft\\IntelliJ IDEA 2023.1.1\\Workspace\\ssmTest\\upload";
            String imageName = UplodUtil.upload(houseImage, path);
            house.setImage(imageName);
        }
        System.out.println(house);
        request.getSession().setAttribute("house", house);
        return "success";
    }

path = “D:\Soft\IntelliJ IDEA 2023.1.1\Workspace\ssmTest\upload” 是要保存图片的地址。就是上传的图片都存在这个文件夹中

数据库：

还需要一个工具类UploadUtil

public class UplodUtil {
        public static String upload(MultipartFile file, String basePath) {
            String uuid = UUID.randomUUID().toString();
            String orgFileName = file.getOriginalFilename();
            String ext = "." + FilenameUtils.getExtension(orgFileName);
            String fileName = uuid + ext;
            try {
                File targetFile = new File(basePath, fileName);
                FileUtils.writeByteArrayToFile(targetFile, file.getBytes());
                return fileName;

            } catch (IOException e) {
                e.printStackTrace();
            }
            return "";
        }

}

配置虚拟目录

方法一：

直接在Tomcat中的server.xml中的host标签中添加：

<Context path="/upload" docBase="D:\\Soft\\IntelliJ IDEA 2023.1.1\\Workspace\\ssmTest\\upload" crossContext="true" reloadable="true" debug="0"/>

path：是虚拟路径

docBase：是保存图片的绝对地址

方法二：

选择你要保存图片的文件夹

success.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<img src="/upload/${house.image}">
</body>
</html>