Java web实现头像上传以及读取显示

下面我将为您详细讲解如何使用Java web实现头像上传以及读取显示的完整攻略。

1. 准备工作

在开始实现之前，需要确保您已经有如下几个基本的环境：

• 开发环境：Eclipse或者IntelliJ IDEA
• 服务器环境：Tomcat
• 数据库：MySQL

同时，需要引入如下两个库：

• commons-fileupload-1.3.1.jar
• commons-io-2.6.jar

您可以通过在项目中的pom.xml文件中加入如下代码完成引入：

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>

2. 前端页面

首先，在前端页面中需要添加文件上传的表单：

<form action="upload.do" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="上传">
</form>

这里的name属性必须为file，enctype属性必须为multipart/form-data，这样才能支持文件上传。

3. 后台实现

在后台，我们需要编写一个Servlet来处理上传的文件：

public class UploadServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            // 获取上传的文件
            Part part = request.getPart("file");
            // 获取文件名
            String fileName = part.getSubmittedFileName();
            // 保存文件到硬盘
            String savePath = request.getServletContext().getRealPath("/uploads");
            File file = new File(savePath + File.separator + fileName);
            part.write(file.getAbsolutePath());
            // 将文件名保存到数据库
            Connection conn = DBUtil.getConnection();
            String sql = "update user set avatar = ? where id = ?";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1, fileName);
            ps.setInt(2, 1);
            ps.executeUpdate();
            // 关闭连接
            DBUtil.close(conn, ps, null);
            // 页面跳转
            request.getRequestDispatcher("/profile.jsp").forward(request, response);
        } catch (SQLException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

在这里，我们首先通过request.getPart("file")方法获取上传的文件，然后通过part.write()方法将文件保存到指定的文件夹中，最后将文件名保存到数据库中。

在这里，我演示了将文件保存到项目根目录下的uploads文件夹中。您也可以根据您的实际需求来修改。

接下来，我们需要在程序中读取上传的图片，通过如下代码实现：

Connection conn = DBUtil.getConnection();
String sql = "select avatar from user where id = 1";
PreparedStatement ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
while (rs.next()) {
    String fileName = rs.getString("avatar");
    String savePath = request.getServletContext().getRealPath("/uploads");
    File file = new File(savePath + File.separator + fileName);
    InputStream is = new FileInputStream(file);
    byte[] bytes = IOUtils.toByteArray(is);
    // 将图片响应给前端
    response.setContentType("image/jpeg");
    response.setContentLength(bytes.length);
    ServletOutputStream sos = response.getOutputStream();
    sos.write(bytes);
    sos.flush();
    sos.close();
}
// 关闭连接
DBUtil.close(conn, ps, rs);

如上面的代码所示，我们首先从数据库中读取出保存的文件名，然后通过getRealPath()方法获取到文件存储的路径，再用File类读取文件，并将文件转换为字节数组，最后响应给前端。

这样，我们就成功的实现了头像上传以及读取显示的功能了。

4. 示例代码

为了更好地帮助您理解，我提供了一个示例代码（使用了JSP进行展示）：

// UploadServlet.java
@WebServlet("/upload.do")
public class UploadServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            // 获取上传的文件
            Part part = request.getPart("file");
            // 获取文件名
            String fileName = part.getSubmittedFileName();
            // 保存文件到硬盘
            String savePath = request.getServletContext().getRealPath("/uploads");
            File file = new File(savePath + File.separator + fileName);
            part.write(file.getAbsolutePath());
            // 将文件名保存到数据库
            Connection conn = DBUtil.getConnection();
            String sql = "update user set avatar = ? where id = ?";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1, fileName);
            ps.setInt(2, 1);
            ps.executeUpdate();
            // 关闭连接
            DBUtil.close(conn, ps, null);
            // 页面跳转
            request.getRequestDispatcher("/profile.jsp").forward(request, response);
        } catch (SQLException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

// ProfileServlet.java
@WebServlet("/profile.do")
public class ProfileServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            Connection conn = DBUtil.getConnection();
            String sql = "select avatar from user where id = 1";
            PreparedStatement ps = conn.prepareStatement(sql);
            ResultSet rs = ps.executeQuery();
            while (rs.next()) {
                String fileName = rs.getString("avatar");
                String savePath = request.getServletContext().getRealPath("/uploads");
                File file = new File(savePath + File.separator + fileName);
                InputStream is = new FileInputStream(file);
                byte[] bytes = IOUtils.toByteArray(is);
                // 将图片响应给前端
                response.setContentType("image/jpeg");
                response.setContentLength(bytes.length);
                ServletOutputStream sos = response.getOutputStream();
                sos.write(bytes);
                sos.flush();
                sos.close();
            }
            // 关闭连接
            DBUtil.close(conn, ps, rs);
        } catch (SQLException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

// profile.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>头像上传示例</title>
</head>
<body>
    <h1>头像上传示例</h1>
    <form action="upload.do" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="上传">
    </form>
    <hr>
    <h2>我的头像</h2>
    <img src="profile.do" width="200" height="200">
</body>
</html>

希望我的回答能够对您有所帮助。