Java笔记--图片上传和解决图片显示问题--2021-09-01

一、问题的原由

以往的项目中要访问图片直接写个url去指向项目中的存储图片的文件夹，然后写访问哪个图片。比如：

http://localhost:8080/ProductSys/img/1.png

但是，在我们的ssm项目中，一般都会使用拦截器（HandlerInterceptor接口的实现类），在用户做任何操作时先拦截看看用户是否登录，用户的权限是否合格等等。

我们会设置所有请求的请求头内容为一个token，请求一般都是在请求体中设置参数，但我们登录验证一般放在头部，拦截器就拦截使用token然后就是业务判断了…

至于如何给所有请求的请求头都添加一个内容，就可以使用axios添加一个拦截器，添加一个请求拦截器，用axios请求时就可以对所有的请求前设置内容了。

可是 http://localhost:8080/ProductSys/img/1.png 它是一个请求，但它不是使用axios的请求，我们只对所有使用了axios的请求设置了请求头内容，这导致了这个图片请求时请求头没有token，而拦截器对它拦截时就获取不到这个token，会直接拦截。让我们访问不到。

二、解决方法

2.1 判断请求路径

在拦截器中通过HttpServletRequest对象获取请求路径，判断请求路径是否包含img等资源文件夹名称，包含就放行。不包含就没有请求资源文件夹下的资源，继续我们的获取token操作。
如请求路径是：

http://localhost:8080/ProductSys/img/1.png

我们拦截器类中可以这样写

// 拦截器 
// 获取请求路径
String requestURI = request.getRequestURI().toString();
// 判断请求路径是否包含img等资源文件夹名称
if(requestURI.contains("img") || requestURI.contains("toLogin") || requestURI.contains("login")){
    // 放行
    return true;
}

这样有一个不坏的地方就是不管用户登没登录，权限够不够，它都可以通过请求路径直接访问我们的资源文件夹下的图片资源。

2.2 对图片进行编码

1. 对图片进行二进制流字符编译
2. 将编译的二进制数据转换为base64编码的数据
3. 将base64编码的数据送给前端

这种方式，img标签的src就不是url了，而是

<img src="“data:img/png;base64,”+base64编码数据">

流程：

1. 通过axios发送图书请求
2. axios就会对这个请求的请求头设置一个token
3. 拦截器进行拦截解析token
4. 解析token通过
5. 进入将图片转换为base64编码的数据字符方法
6. 响应base64编码的数据字符给前端
7. axios使用.then(res){ xxxx } 接收

这种方式就可以在用户没登录，权限不够的情况下，让用户无法访问我们的资源文件夹下的图片资源。

Controller(控制器)层

    // 上传头像方法
    @RequestMapping("/uploadFile")
    public String uploadFile(@RequestParam("img") MultipartFile multipartFile,@RequestParam("id") String id, HttpServletRequest request) throws IOException {
        // uploads文件夹位置
        String rootPath = request.getSession().getServletContext().getRealPath("/upload");
        // 使用工具类
        PictureUtils.uploadFile(multipartFile,id,rootPath);
        //返回
        return "success";
    }

    // 头像图片转换为二进制流
    @RequestMapping("/downFile/{id}")
    public String downFile(@PathVariable("id") String id,HttpServletRequest request) throws Exception{
        // 使用工具类
        return PictureUtils.downFile(id,request);
    }

PictureUtils类（工具类）

package com.apps.utils;

import org.springframework.web.multipart.MultipartFile;
import sun.misc.BASE64Encoder;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;

/**
 * @author hk Email:2113438464@qq.com
 * @ClassName PictureUtils
 * @Description : 图片的工具类
 * @date 2021/9/4
 */
public class PictureUtils {

    // img文件夹位置
    // rootPath == String rootPath = request.getSession().getServletContext().getRealPath("/img");

    // 上传头像方法
    public static void uploadFile(MultipartFile multipartFile, String id, String rootPath) throws IOException {
        // 新文件名 = 现在的用户名 + 上传的文件名的后缀（如.jpg/.png）
        // String newFileName = name + filename.substring(filename.lastIndexOf("."));
        // 所有的图片的后缀格式全部硬转换为.png
        String newFileName = id + ".png";
        // 新文件
        File newFile = new File(rootPath + File.separator + newFileName);
        // 判断目标文件所在目录是否存在
        if(!newFile.getParentFile().exists()) {
            // 如果目标文件所在的目录不存在，则创建父目录
            newFile.getParentFile().mkdirs();
        }
        // 将内存中的数据写入磁盘
        multipartFile.transferTo(newFile);
    }

    // 头像图片转换为二进制流字符
    public static String downFile(String id, HttpServletRequest request)throws IOException {
        // base64编码数据
        BASE64Encoder encoder = new sun.misc.BASE64Encoder();
        // 创建File对象集合
        Map<String, File> fileMap = new HashMap<>();
        // 支持存储的图片格式
        String[] supportFormat = {"gif","jpg","png"};
        // 对比图片格式
        for (String format : supportFormat) {
            // 拼接三种图片后缀,根据用户名查找图片
            String fileName = request.getSession().getServletContext().getRealPath("upload")+ File.separator + id + "." + format;
            // 根据路径创建File对象
            File f = new File(fileName);
            // 判断是否存在, 存在，添加到File对象集合中
            if(f.exists()) fileMap.put(format,f);
        }
        // 最后的File对象,最开始是默认的图片
        File file = new File(request.getSession().getServletContext().getRealPath("upload") + File.separator +"no.png");;
        // 最后的图片后缀
        String format = "png";
        // 判断File对象集合中是否有数据
        if(!(fileMap.size() == 0)){
            // 有，使用File对象集合中随机一个File
            Set<String> strings = fileMap.keySet();
            // 给循环取个名字
            one : for (String string : strings) {
                // 修改图片和图片的格式
                file = fileMap.get(string);
                format = string;
                // 只要一次，结束循环
                break one;
            }
        }
        // 对图片进行读取，返回缓冲图像对象
        BufferedImage bi = ImageIO.read(file);
        // 创建二进制数组输出流
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        // 写
        ImageIO.write(bi, format, baos);
        // 获取字节数组
        byte[] bytes = baos.toByteArray();
        // 将二进制数据转换为base64编码的数据
        return encoder.encodeBuffer(bytes).trim();
    }
}