2.网页获取图片——代码理解

一、后端代码

@WebServlet({
        "/meal/pic"
})
public class MealServlet extends HttpServlet {
    private static final String PIC_DIR = "C:\\Users\\GJC\\Pictures\\素材\\图片素材";
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String path = req.getServletPath();

        switch (path) {
            case "/meal/pic":
                mealPic(req, resp);
                break;
        }
    }

    private void mealPic(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String meal_pic = req.getParameter("meal_pic");
        File picFile = new File(PIC_DIR, meal_pic);

        resp.setHeader("Content-Type", "application/octet-stream");
        resp.setContentLength((int) picFile.length());

       
        OutputStream out = resp.getOutputStream();
        FileInputStream in = new FileInputStream(picFile);

        byte[] types = new byte[1024 * 500];
        int len = 0;
        while ((len = in.read(types)) != -1) {
            out.write(types,0,len);
        }
        out.flush();
        out.close();
        in.close();
    }
}

二、运行效果

在启动项目的初始路径后加上，定义的路径，输入指定图片的名字会可以实现图片的下载，大概就是处理客户端的http请求，发送图片给客户端。

在初始路径下加上定义的路径，加上图片的参数，回车
初始路径：http://localhost:8080/
加上定义路径以及图片参数信息：http://localhost:8080/meal/pic?meal_pic=food01.jpeg
/meal/pic是我们定义的路径
？meal_pic后面是参数信息，存在meal_pic中，回车发起请求。
后端代码运行，获取信息进行IO操作。
跳出页面，选择图片的下载位置

三、代码理解

1. 创建MealServlet类继承HttpServlet类，在里面重写了父类的doget和doPost方法，使用@WebServlet注解定义了这个类的网址为“/meal/pic",doGet方法用来获取服务端信息，并且将其作为响应返回给客户端，doPost方法用来客户端把数据发到服务端，适用于发送大量数据。
2. 在重写的doGet方法里面，调用重写的doPost方法，在doPost方法中先获取路径存在path变量中，根据switch分支结构进行不同方法的调用。
3. 在这里，当path匹配”/meal/pic“时调用mealPic方法，是实现图片获取的核心部分。利用getParameter方法从客户端的请求中获取变量为meal_pic的信息，也就是图片的信息（名字）。创建一个File对象用于后面IO操作，其中PIC_DIR是图片的路径（存储位置的路径），传入的meal_pic是已经从请求中获取了图片名字的同名String变量。
4. 设置响应头为二进制数据，告知客户端响应内容是二进制数据，并且设置响应内容的大小为图片的大小。设置 Content-Type 为 application/octet-stream 通常用于下载文件，这告诉浏览器响应的内容是二进制流，适合文件下载。
5. 创建获取响应的输出流，向客户端发送数据，创建输入流，来读取指定路径的图片文件。
6. 创建一个byte数组当作缓冲区，设置缓冲区的大小，数据读取到缓冲区中，长度返回到len变量中，值为-1表示读完了
7. while循环，输出流写数据，从0字符开始，到len字符，读取几个写几个。
8. 最后，要刷新输出流，确保所有数据发送完成，并关闭流，避免资源浪费。

四、前端代码

            <img  src="/meal/pic?meal_pic=food07.jpeg" class="h-75 object-fit-cover card-img-top rounded-1" alt="...">

在img标签中将src路径修改为/meal/pic?meal_pic=food07.jpeg，项目启动时，加载页面发起Get请求，后端代码执行相关程序，变量meal_pic的图片信息就可以被后端代码获取到，进行IO操作，前端获取到图片。
大概流程应该如下：