什么是base64編碼
base64編碼就是基于64個(gè)可打印字符來表示二進(jìn)制數(shù)據(jù)的編碼方法改淑。
- 我們知道一個(gè)字節(jié)等于8個(gè)比特馒吴,3個(gè)字節(jié)為24個(gè)比特敞曹。
- 2? = 64沼侣。6個(gè)比特對應(yīng)一個(gè)字符。4個(gè)字符為24個(gè)比特蟆沫。
- 所以4個(gè)可打印的字符可表示3個(gè)字節(jié)。
base64適用場景
Base64 常用于在處理文本數(shù)據(jù)的場合温治,一些二進(jìn)制數(shù)據(jù)饭庞,包括 MIME 的電子郵件及 XML 的一些復(fù)雜數(shù)據(jù)等。
java8實(shí)現(xiàn)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 () {
// 請求完成并且響應(yīng)狀態(tài)碼為200
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 獲取響應(yīng)文本
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;
}
}
效果: