IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> Java知识库 -> Java笔记--图片上传和解决图片显示问题--2021-09-01 -> 正文阅读

[Java知识库]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();
    }
}

  Java知识库 最新文章
计算距离春节还有多长时间
系统开发系列 之WebService(spring框架+ma
springBoot+Cache(自定义有效时间配置)
SpringBoot整合mybatis实现增删改查、分页查
spring教程
SpringBoot+Vue实现美食交流网站的设计与实
虚拟机内存结构以及虚拟机中销毁和新建对象
SpringMVC---原理
小李同学: Java如何按多个字段分组
打印票据--java
上一篇文章      下一篇文章      查看所有文章
加:2021-09-06 11:02:26  更:2021-09-06 11:03:37 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 13:10:50-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码