SSM框架+MySql数据库实现图片的上传、回显、展示、下载

时间：2025-01-21 14:18:43

前言

最近很多人反映，当spring+springmvc+mybatis整合之后，不知道图片的上传、回显、展示、下载如何实现。其实ssm框架已经帮我们封装好了这块，我们要做的就是进行相关的配置和调用。今天我就配置这块进行一个简单讲解。

SSM框架整合可参考：/guigu2012/article/details/72926481。

1、导入jar包

如果是maven工程，只需要在添加如下代码：

        <!-- 上传下载需要设计到的jar包 -->
        <!-- /artifact/commons-io/commons-io -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
 
        <!-- /artifact/commons-fileupload/commons-fileupload -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>

2、编写工具类

package ;

import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;

import ;

import ;
import ;

/**
 * 图片工具类
 * @author gzlx
 *
 */
public class ImageUtils {
	/**
	 * 上传图片
	 * @param request
	 * @param book
	 * @param pictureFile
	 * @throws IOException
	 */
	public static String upload(HttpServletRequest request,
			MultipartFile pictureFile) throws IOException {
		String imgPath = null;//装配后的图片地址
		//上传图片
		if(pictureFile!=null&&!()){
			// 使用UUID给图片重命名，并去掉四个“-”
			String name = ().toString().replaceAll("-", "");
			// 获取文件的扩展名
			String ext = (pictureFile
					.getOriginalFilename());
			// 设置图片上传路径
			String url = ().getServletContext()
					.getRealPath("/upload");
			// 检验文件夹是否存在
			isFolderExists(url);
			// 以绝对路径保存重名命后的图片
			(new File(url + "/" + name + "." + ext));
			// 装配图片地址
			imgPath = "upload/" + name + "." + ext;
		}
		return imgPath;
	}
	/**
	 * 验证文件夹是否存在
	 * @param strFolder
	 * @return
	 */
	public static boolean isFolderExists(String strFolder){
           File file = new File(strFolder);
        
           if (!())
           {
              if (())
              {
                  return true;
              }
              else{
                  return false;
              }
               
           }
           ("-----------------文件上传路径："+strFolder);
           return true;
       }
	/**
	 * 获取目录下所有文件(按时间排序)
	 * @param path
	 * @return
	 */
	public static List<File> getFileSort(String path) {
	    List<File> list = getFiles(path, new ArrayList<File>());
	    if (list != null && () > 0) {
	        (list, new Comparator<File>() {
	            public int compare(File file, File newFile) {
	                if (() < ()) {//降序<;升序>
	                    return 1;
	                } else if (() == ()) {
	                    return 0;
	                } else {
	                    return -1;
	                }
	            }
	        });
	    }
	    return list;
	}
	/**
	 *  获取目录下所有文件
	 * @param realpath
	 * @param files
	 * @return
	 */
	public static List<File> getFiles(String realpath, List<File> files) {
	    File realFile = new File(realpath);
	    if (()) {
	        File[] subfiles = ();
	        for (File file : subfiles) {
	            if (()) {
	                getFiles((), files);
	            } else {
	                (file);
	            }
	        }
	    }
	    return files;
	}

}

3、文件上传

3.1 修改文件

 

  
	<!-- 定义文件上传解析器 -->
	<bean  class="">
		<!-- 设定默认编码 -->
		<property name="defaultEncoding" value="UTF-8"></property>
		<!-- 设定文件上传的最大值5MB，5*1024*1024 -->
		<property name="maxUploadSize" value="5242880"></property>
        <!-- 其他的大家可以自行配置，不影响主功能-->
	</bean>

3.2 修改jsp界面

上传图片的<input>标签中，name属性的名字和实体bean的属性名称不能一致，同时form表单加enctype属性：

注意：form表单中可以同时放置普通的表单数据

<form method="post" enctype="multipart/form-data" action="${}/" >
<input type="file" name="pictureFile"  value="请选择图片" />

3.3 在Controller中编写相关的代码

 

/**
	 * 添加用户信息
	 * @param user，封装表单中除图片地址以外的其他数据（要求<input>中的name跟实体类中的属性一致）
	 * @param request，用来获取文件的存储位置等
	 * @param pictureFile，封装上传图片的信息如大小、文件名、扩展名等,（要求<input>中的name跟次命名一致）。
	 * @return
	 * 注意：图片提交input输入框的name属性值要与Controller中MultipartFile
	 * 接口所声明的形参名一致，不然需要用@RequestParam注解绑定
	 */
	@RequestMapping(path = "/", method = )
	public String addUser(User user, HttpServletRequest request, MultipartFile pictureFile) {
		// 得到上传图片的地址
		String imgPath;
		try {
            //ImageUtils为之前添加的工具类
			imgPath = (request, pictureFile);
			if (imgPath != null) {
				// 将上传图片的地址封装到实体类
				(imgPath);
				("-----------------图片上传成功！");
			}else{
                ("-----------------图片上传失败！");
            }
		} catch (IOException e) {
			// TODO Auto-generated catch block
			();
			("----------------图片上传失败！");
		}
		//将数据提交到数据库（包含文件和普通表单数据）
		int rowNo = (user);
		if (rowNo > 0) {
			("----------------------用户添加成功！");
			// 转发：forword，重定向：redirect
			return "redirect:/user/";
		} else {
			("----------------------用户添加失败！");
			return "addUser";
		}

	}

4、图片回显

在jsp界面显示图片的<img>标签中，通过el表达式来动态给src赋值

<!--${}数据库中存储的：upload/图片名称.图片后缀-->
<img src="${}/${ }"/>

以上内容为图片【其他文件等同】的上传以及图片的回显，

5、获取本地文件，并通过jsp进行展示

5.1 在Controller中编写相关代码

    /**
	 * 文件列表的显示
	 * @param request
	 * @param m:封装数据，这里主要是封装List<File>
	 * @return
	 */
	@RequestMapping(value = "/")
	public String showFile(HttpServletRequest request, Model m) {
		ServletContext servletContext = ();
		//动态获取存放文件的本地路径【绝对路径】
		String path = ("/upload");		
		//获取文件夹下的所有文件【ImageUtils为之前编写的工具类】
		//File[] fileList = new File(path).listFiles();//原生写法
		List<File> fileList = (path);
		("fileList", fileList);
		return "showFile";
	}

5.2 通过jsp进行文件展示

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
	<h3 align="center">文件列表展示</h3>
	<c:choose>
		<c:when test="${not empty fileList }">
			<!--索引-->
			<c:set var="index" value='1'></c:set>
			<c:forEach items="${fileList }" var="file">
				<!-- filename:文件的名字，不带UUID -->
				<c:set var="filename"
					value='${fn:substring(,fn:indexOf(,"_")+1,fn:length()) }' ></c:set>
				<!-- filefullname:文件的名字，带UUID c:set中使用“\\”会报错，要使用“\\\\”，其他地方使用“\\”即可-->
				<c:set var="filefullname"
					value='${fn:split(,"\\\\")[fn:length(fn:split(,"\\\\"))-1] }'></c:set>
				<!-- rootdir:文件的目录 -->
				<c:set var="rootdir"
					value='${}/upload/'></c:set>
				<div>
					<img alt='${filefullname}' src='${(filefullname) }' style="width: 160px;height: 100px;border-radius: 5px;"/>
					<!-- 文件的全路径 -->
					<a href="${}/user/?fileName=${filefullname}">下载</a>
				</div>
				<!-- 每行显示5张图片 -->
				<c:if test="${index%5==0 }">
					<br>
				</c:if>
				<!--索引+1-->
				<c:set var="index" value='${index+1 }'></c:set> 
			</c:forEach>
		</c:when>
		<c:otherwise>
                     暂无数据
        </c:otherwise>
	</c:choose>

</body>
</html>

6、文件下载

在jsp中，通过<a ></a>标签绑定下载文件的路径，见上文5.2所示

6.1 在Controller中编写相关代码

       /**
	 * 文件下载
	 * 用ResponseEntity<byte[]> 返回值完成文件下载
	 * @param request
	 * @param fileName:文件的名称
	 * @return
	 * @throws Exception
	 */
	@RequestMapping(value = "")
	public ResponseEntity<byte[]> fileDownload(HttpServletRequest request, @RequestParam(value = "fileName") String fileName)
			throws Exception {
		String fName = (("_") + 1); // 从uuid_name.jpg中截取文件名
		//根据文件的绝对路径，获取文件
		File file = new File(().getRealPath("/upload/"+fName));
        //设置请求头
		HttpHeaders headers = new HttpHeaders();
		fileName = new String(("utf-8"), "iso8859-1");
		("Content-Disposition", "attachment;filename=" + fileName);
		HttpStatus statusCode = ;
		ResponseEntity<byte[]> response = new ResponseEntity<byte[]>((file), headers, statusCode);
		return response;
	}

到此，整个图片上传、回显、展示、下载就全部完成了，希望能够帮助到各位朋友！

 

相关文章