分析base64编码

什么是base64编码

base64编码就是基于64个可打印字符来表示二进制数据的编码方法。

我们知道一个字节等于8个比特，3个字节为24个比特。
2⁶ = 64。6个比特对应一个字符。4个字符为24个比特。
所以4个可打印的字符可表示3个字节。

base64适用场景

Base64 常用于在处理文本数据的场合，一些二进制数据，包括 MIME 的电子邮件及 XML 的一些复杂数据等。

java8实现base64编码和解码

public class Base64Util {

    public static String encode(String param) {
        Base64.Encoder encoder = Base64.getEncoder();
        return encoder.encodeToString(param.getBytes(StandardCharsets.UTF_8));
    }

    public static String decode(String param) {
        Base64.Decoder decoder = Base64.getDecoder();
        return new String(decoder.decode(param), StandardCharsets.UTF_8);
    }
}

下载显示图片（使用base64编码传输显示）

页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="图片base64编码展示">
    <meta name="author" content="sunpeiyu">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>Document</title>
    <style type="text/css">
        body {
            background-color: white;
        }
    </style>

    <script type="text/javascript">
        function showImage() {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "http://localhost:8091/diverter/file/download/base64/3.jpeg" , true);
            
            xhr.onreadystatechange = function () {
                // 请求完成并且响应状态码为200
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        // 获取响应文本
                        var responseValue = xhr.responseText;
                        console.log('Response:', responseValue);

                        let img = document.getElementById("imgId");
                        let srcValue = "data:image/png;base64," + responseValue;
                        img.setAttribute("src", srcValue);
                    } else {
                        console.error('Error:', xhr.statusText);
                    }
                }
            };

            xhr.send();
            
        }

        function clearImage() {
            let img = document.getElementById("imgId");
            img.setAttribute("src", "");
        }
    </script>
</head>

<body>
    <div>
        <a href="#" onclick="showImage()">显示下载图片</a>
        <a href="#" onclick="clearImage()">清空图片</a><br/>
        <img style="width:200px; height:200px; margin-top: 20px;" alt="" id="imgId"/>
    </div>
</body>
</html>

springboot后端获取文件，base64编码返回

import cn.hutool.core.io.FileUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.Base64Utils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;

@Slf4j
@RequestMapping("/file")
@RestController
public class FileController {

    @GetMapping("/download/base64/{fileName}")
    public String handleFileDownloadByBase64(@PathVariable String fileName,
                                             HttpServletResponse response,
                                             HttpServletRequest request) {
        String downloadFilePath = "F:\\temp" + File.separator + fileName;

        if (!FileUtil.exist(downloadFilePath)) {
            return "下载文件不存在";
        }

        /**
         * 解决跨域请求问题
         */
        response.setHeader("Access-control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE,PATCH");
        response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));

        byte[] fileByteArr = FileUtil.readBytes(downloadFilePath);
        String result = Base64Utils.encodeToString(fileByteArr);
        return result;
    }
}

效果：

最后编辑于：2024.06.16 21:15:07