spring实现文件上传（图片解析）

Posted 2020-09-30 陈扬天

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了spring实现文件上传（图片解析）相关的知识，希望对你有一定的参考价值。

合抱之木，生于毫末，千里之行，始于足下，要想了解spring的文件上传功能，首先要知道spring是通过流的方式将文件进行解析，然后上传。那么是不是所有需要用的文件上传的地方都要写一遍文件解析器呢？

放心，spring这个大管家已经为我们做好了一切！

我们只需要在spring的配置文件中加入下面代码：

 <!-- 文件上传解析器 -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
        p:maxUploadSize="152400" 
        p:defaultEncoding="utf-8">
        <!-- <property name="defaultEncoding" value="utf-8"></property> -->
    </bean>
    
    <!-- SpringMVC在超出上传文件限制时，会抛出org.springframework.web.multipart.MaxUploadSizeExceededException -->  
    <!-- 该异常是SpringMVC在检查上传的文件信息时抛出来的，而且此时还没有进入到Controller方法中 -->  
    <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">  
        <property name="exceptionMappings">  
            <props>  
                <!-- 遇到MaxUploadSizeExceededException异常时，自动跳转到/WEB-INF/jsp/error_fileupload.jsp页面 -->  
                <prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error_fileupload</prop>  
            </props>  
        </property>  
    </bean>

我们就不用再去在文件的解析上绞尽脑汁了，只需要专注于业务层面的逻辑就好了，是不是很简单？

接下来我们看一个小例子：

html前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="<%=request.getContextPath()%>/user/add" method="post" enctype="multipart/form-data">
    
    
    <h1>新增用户</h1>
    
    <table>
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="userName" value="${user.userName }" />
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="text" name="password" value="${user.userPass }" />
            </td>
        </tr>
        <tr>
            <td>头像：</td>
            <td>
                <input type="file" name="photo" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="上传" />
            </td>
        </tr>
    </table>
</form>

</body>
</html>

大家有没有注意到以上代码的form表头中有一行代码：

enctype="multipart/form-data"

没错，想要上传二进制文件，该表头属性必不可少。
controller控制层代码：

package com.wskj.springmvc.controller;

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import com.wskj.springmvc.pojo.UserInfo;

@Controller
@RequestMapping("/user")
public class UserController {

    @RequestMapping(value="/add", method=RequestMethod.GET)
    public String addUser(){
        
        return "user/add";
    }
    
    @RequestMapping(value="/add", method=RequestMethod.POST)
    public String addUser(Model model, UserInfo user, @RequestParam(name="photo", required=false) MultipartFile photo, HttpServletRequest request) throws IOException{
        
        //对文件进行处理
        
        //判断用户是否上传了文件
        //MultipartFile.getSize() : 获取文件的大小（字节：byte）  1024byte = 1kb   1024kb=1mb   GB  TB  PB
        if(photo.isEmpty() == false && photo.getSize() > 0){
            
            //获取文件的名称
            String name = photo.getName();//photo
            String fileName = photo.getOriginalFilename();//mydata.jpg
            //获取文件扩展名
            String extension = fileName.substring(fileName.lastIndexOf("."));
            
            byte[] data = photo.getBytes();//字节数组
            String contentType = photo.getContentType();
            /**
             * 扩展名      Content-Type
             * .txt     text/plain
             * .jpg  image/jpeg
             * .mp3     audio/mp3
             * .mp4     video/mpeg4
             */
            
            photo.getInputStream();//获取文件输入流
            
            //保存到磁盘
            //保存的路径
            //不是 -》 F:\\java\\workspace\\spring\\springmvc_fileupload_20170401\\WebContent\\files
            //是 -》 x:\\apache tomcat-7\\webapps\\appName\\files
            String savedPath = request.getServletContext().getRealPath("files");//获取files目录的绝对路径
            String filePath = savedPath + "/" + fileName;
            
            //将文件写入磁盘
            photo.transferTo(new File(filePath));
            
            //设置UserInfo.headerPhoto
            user.setHeaderPhotoUrl("files/"+fileName);
            model.addAttribute("headerUrl", user.getHeaderPhotoUrl());
        }
        
        model.addAttribute("user", user);
        
        return "user/success";
    }
    
    @RequestMapping(value="/add2", method=RequestMethod.GET)
    public String addUser2(){
        
        return "user/add2";
    }
    
    @RequestMapping(value="/add2", method=RequestMethod.POST)
    public String addUser2(Model model, UserInfo user, @RequestParam(name="photos", required=false) MultipartFile[] photos, HttpServletRequest request) throws IOException{
        
        //对文件进行处理
        
        if(photos != null && photos.length>0){
            List<String> photoUrls = new ArrayList<String>();
            for(MultipartFile photo : photos){
                
                //判断用户是否上传了文件
                //MultipartFile.getSize() : 获取文件的大小（字节：byte）  1024byte = 1kb   1024kb=1mb   GB  TB  PB
                if(photo.isEmpty() == false && photo.getSize() > 0){
                    
                    //获取文件的名称
                    String name = photo.getName();//photo
                    String fileName = photo.getOriginalFilename();//mydata.jpg
                    //获取文件扩展名
                    String extension = fileName.substring(fileName.lastIndexOf("."));
                    
                    byte[] data = photo.getBytes();//字节数组
                    String contentType = photo.getContentType();
                    /**
                     * 扩展名      Content-Type
                     * .txt     text/plain
                     * .jpg  image/jpeg
                     * .mp3     audio/mp3
                     * .mp4     video/mpeg4
                     */
                    
                    photo.getInputStream();//获取文件输入流
                    
                    //保存到磁盘
                    //保存的路径
                    //不是 -》 F:\\java\\workspace\\spring\\springmvc_fileupload_20170401\\WebContent\\files
                    //是 -》 x:\\apache tomcat-7\\webapps\\appName\\files
                    String savedPath = request.getServletContext().getRealPath("files");//获取files目录的绝对路径
                    String filePath = savedPath + "/" + fileName;
                    
                    //将文件写入磁盘
                    photo.transferTo(new File(filePath));
                    
                    //设置UserInfo.headerPhoto
                    
                    photoUrls.add("files/"+fileName);
                }
                
            }
            
            model.addAttribute("headerUrl", photoUrls);
        
        }
        
        model.addAttribute("user", user);
        
        return "user/success2";
    }
    
}

后台根据前段的name属性接收参数，二进制文件类型为

MultipartFile，如果需要接收多个文件，只需要设置成集合然后遍历即可。
接下来是上传成功前段回显的jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

    <dl>
        <dt>用户名：</dt>
        <dd>${user.userName }</dd>
        <dt>头像：</dt>
        <dd>
            <img style="max-width:300px;max-height:200px;" src="<%=request.getContextPath() %>/${headerUrl}" />
        </dd>
    </dl>

</body>
</html>

至此，最基础的文件上传测试成功。

但是，在实际项目中，我们可能只是需要启用一个div来进行文件的异步上传，这时我们可以使用html5的新特性formdata实现ajax的提交。

具体代码如下：

jsp前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%= request.getContextPath()%>/static/jquery-1.10.2.js"></script>
<script type="text/javascript">

$(function(){

    $("#btnupload").click(function(){
        
        var formdata = new FormData(document.getElementById("form1"));//可以上传文件
        //var formdata = $("#form1").serializeArray();//无法上传文件的
        alert(formdata);
        var url ="<%= request.getContextPath()%>/upload/demo1";
        $.ajax({
            url:url,
            data:formdata, //name=zhangsan&age=50   {}
            contentType: false,//默认: "application/x-www-form-urlencoded"
            processData: false,//设置 processData 选项为 false，防止自动转换数据格式
            type:"post",
            dataType:"json",
            success:function(data){
                alert(data);
            },
            error:function(er){
                alert(er.responseText);
            }
        });
        
        
    });
});

</script>

</head>
<body>

    <h1>使用Html5提供的FormData实现ajax提交</h1>
    <h3>浏览器必须支持html5，如果是IE6 - IE8，那就洗洗睡吧...</h3>

    <form id="form1">
        文件名：<input type="text" name="fileName" />
        文件：<input type="file" name="myfile" />
        <input id="btnupload" type="button" value="ajax上传文件" />
    </form>


</body>
</html>

我们可以看见，只需要给要提交的form表单指定一个唯一标识id即可，是不是很方便？

后台controller接收代码：

package com.wskj.uploadfile.controller;

import java.io.File;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@Controller
@RequestMapping("/upload")
public class AjaxController {

    @RequestMapping(value="/demo1", method=RequestMethod.GET)
    public String demo1(){
        return "upload/demo1";
    }
    
    @RequestMapping(value="/demo1", method=RequestMethod.POST)
    @ResponseBody
    public boolean demo1(String fileName, MultipartFile myfile, HttpServletRequest request) throws IllegalStateException, IOException{
        
        String path = request.getServletContext().getRealPath("files");
        path += "/" + myfile.getOriginalFilename();
        File file = new File(path);
        myfile.transferTo(file);
        
        System.out.println(fileName+" - 上传成功");
        
        return true;
    }
    
}

另外还可以使用jquery.form.js实现ajax的上传：

前段jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%= request.getContextPath()%>/static/jquery-1.10.2.js"></script>
<script type="text/javascript" src="<%= request.getContextPath()%>/static/jquery.form.js"></script>
<script type="text/javascript">

$(function(){

    $("#btnupload").click(function(){

        var url ="<%= request.getContextPath()%>/upload/demo2";
        
        $("#form1").ajaxSubmit({  
            type:\'post\',  
            url:url,  
            clearForm:true,//清空所有表单元素的值
            resetForm:true,//重置所有表单元素的值
            success:function(data){  
                alert(data);  
            },  
            error:function(XmlHttpRequest,textStatus,errorThrown){  
                alert("上传失败了");
            }  
        });  
        
    });
});

</script>

</head>
<body>

    <h1>使用jquery.form.js实现ajax文件上传</h1>
    <h3>对浏览器没有限制，尽情使用吧骚年们...</h3>

    <form id="form1">
        文件名：<input type="text" name="fileName" value="我的头像" />
        文件：<input type="file" name="myfile" />
        <input id="btnupload" type="button" value="ajax上传文件" />
    </form>


</body>
</html>

后台controller接收代码：

package com.wskj.uploadfile.controller;

import java.io.File;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@Controller
@RequestMapping("/upload")
public class AjaxController {

   
    
    
    
    @RequestMapping(value="/demo2", method=RequestMethod.GET)
    public String demo2(){
        return "upload/demo2";
    }
    
    @RequestMapping(value="/demo2", method=RequestMethod.POST)
    @ResponseBody
    public boolean demo2(String fileName, MultipartFile myfile, HttpServletRequest request) throws IllegalStateException, IOException{
        
        String path = request.getServletContext().getRealPath("files");
        path += "/" + myfile.getOriginalFilename();
        File file = new File(path);
        myfile.transferTo(file);
        
        System.out.println(fileName+" - 上传成功");
        
        return true;
    }
    
    
}

当然，使用这两种方法也必须在spring中配置文件上传解析器，这个是上传二进制文件的前提。

以上是关于spring实现文件上传（图片解析）的主要内容，如果未能解决你的问题，请参考以下文章

前端功能：Vue实现图片/文件的上传与内容解析

Android实战----基于Retrofit实现多图片/文件图文上传

Spring上传文件，图片，以及常见的问题

企业级spring-boot案例-Spring Boot 上传文件（图片）