SSM实现图片上传下载功能

0. 基本步骤

1. 框架搭建
2. 实现带图片上传的注册功能
3. 实现下载功能

1. 框架搭建

Step1 创建开发项目

创建基础MVC包结构：controller、service、mapper、pojo

Step2 导入jar包

导入SpringMVC的jar、Spring的jar、MyBatis的jar、上传文件的jar

Step3 配置文件

1. 配置applicationcontext.xml文件
   开启service包注解扫描
   配置数据库信息properties文件
   配置数据源bean
   配置SqlSession工厂bean
   配置mapper扫描bean，记得把工厂依赖设置为属性注入
   配置事务管理
2. 配置springmvc.xml文件
   配置controller包注解扫描
   配置springmvc 注解驱动
   配置静态资源放行
   配置文件上传资源解析bean
3. 配置web.xml文件
   配置spring配置文件加载路径
   配置spring容器资源加载监听器
   配置SpringMVC的DispatcherServlet
   配置编码过滤器

2. 实现带图片上传的注册功能

基本思路：
Step1 先实现图片的异步上传，反显图片，获取图片上传后的存储路径，
Step2 将注册的数据、头像图片的存储路径一并提交至后台完成注册。

2.1 JS实现图片异步上传

实现思路：
Step1 首先引入jQuery文件
Step2 添加注册按钮单击事件
Step3 获取上传文件数据、利用FormData对象封装数据
Step4 ajax方式提交后台，注意processData设置为false、contentType设置为false
Step5 上传成功后回显图片，将图片路径填至隐藏域
具体JS实现图片上传方法：

$(function(
  $("#uploadBtn").click(function(){
    // 获取上传文件
    var uploadPhoto = $("#upload")[0].files[0];
    // 利用FormDate对象封装文件数据
    var formdata = new FormData();
    formdata.append("uploadPhoto",uploadPhoto);
    $.ajax({
        url:'regUpload',
        type:'post',
        processData:false,
        contentType:false,//设置false，将请求数据类型设置为multipart/form-data
        data:formdata,
        success:function(data){
           if(data.result){
            alert("上传成功！");
            $("#imageSpan").html("<img src='<%=basePath%>"+data.msg+"' width='100px' />");
            $("#imgPath").val(data.msg);
            }else{
                alert("上传失败！原因："+data.msg);
            } 
        }
    });
  });
    
));

2.2 后台处理上传的图片

实现思路：
1、获取文件在服务器存储中的实际路径
2、获取文件原始文件名，随机生成文件名
3、实际路径拼接随机文件名，将文件存储至目标路径
4、存储文件的原始名、随机名、文件类型至数据库
5、返回上传结果、存储路径+文件名
具体代码如下：

@RequestMapping("regUpload")
@ResponseBody
public Result regUpload(MultipartFile uploadPhoto, HttpServletRequest request) throws IOException {

    // 业务处理
    // 1、获取文件在服务器存储中的实际路径
    String realPath = request.getServletContext().getRealPath("/uploadImage/");
    File pathFile = new File(realPath);
    if(!pathFile.exists()){
        pathFile.mkdirs();
    }
    // 2、获取文件原始文件名，随机生成文件名
    String originalFilename = uploadPhoto.getOriginalFilename();

    String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));

    String fileName = UUID.randomUUID()+suffix;
    // 3、实际路径拼接随机文件名，将文件存储至目标路径
    uploadPhoto.transferTo(new File(realPath+fileName));

    // 4、存储文件的原始名、随机名、文件类型至数据库
    String contentType = uploadPhoto.getContentType();
    PhotoImage photoImage = new PhotoImage("/uploadImage/"+fileName, originalFilename, fileName, contentType );
    System.out.println("============================");
    int flag = 0 ;
    try{
        flag =photoImageService.insertImage(photoImage);
    }catch (Exception e){
        e.printStackTrace();
    }
    if(flag==1){
        // 5、返回上传结果、存储路径+文件名
        Result result = new Result(true,"uploadImage/"+fileName);
        return result;
    }else{
        return new Result(false,"图片存储失败！");
    }
}

2.3 html页面实现

<div style="width:500px; margin:auto; margin-top:20px;">
    <form id="regForm" action="regUser" method="post">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input id="username" type="text" name="uname"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input id="password" type="text" name="pwd"></td>
            </tr>

            <tr>
                <td colspan="2" align="center"><span id="imageSpan"></span></td>
            </tr>
            <tr>
                <td>上传文件：</td>
                <td>
                    <input id="upload" type="file" name="file">
                    <input type="hidden" id="imgPath" name = "imgPath">
                    <input type="button" id="uploadBtn" value="上传">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input id="submitBtn" type="submit" value="注册">
                </td>
            </tr>
        </table>
    </form>
</div>

2.4 实现用户信息注册功能

实现思路：
Step1 用<form>标签收集页面所有数据
Step2 submit按钮提交至后台
Step3 通过service、mapper存储

具体实现代码：

@RequestMapping("regUser")
public String regUser(User user){
    // 业务处理
    int flag = userService.insertUser(user);
    // 请求转发
    //return "forward:register.jsp";
    return "register";
}

3. 实现图片下载功能

实现思路：
Step1 前台用超链接触发下载功能，将要下载的文件名作为请求参数带上
Step2 后台接收请求，先设置响应头，表明为下载请求:

   `response.setHeader("Content-Disposition", "attachment;filename="+filenName);`

Step3 获取文件的在硬盘上的绝对路径
Step4 利用FileUtils将文件转成byte数组
Step5 从相应对象中获取输出流，将byte数组写出
Step6 清除输出流的缓存、关闭输出流

具体代码：

@RequestMapping("downloadFile")
public void downloadFile(String filename,HttpServletRequest req, HttpServletResponse resp) throws IOException {
    // Step2 后台接收请求，先设置响应头，表明为下载请求
    resp.setHeader("Content-Disposition", "attachment;filename="+filename);
    // Step3 获取文件的在硬盘上的绝对路径
    String realPath = req.getServletContext().getRealPath("/uploadImage/");
    // Step4 利用FileUtils将文件转成byte数组
    File file = new File(realPath,filename);
    byte[] bytes = FileUtils.readFileToByteArray(file);
    // Step5 从相应对象中获取输出流，将byte数组写出
    ServletOutputStream os = resp.getOutputStream();
    os.write(bytes);
    // Step6 清除输出流的缓存、关闭输出流
    os.flush();
    os.close();
}