分析base64編碼

什么是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;
    }
}

效果:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末舟山,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌累盗,老刑警劉巖寒矿,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異若债,居然都是意外死亡符相,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進(jìn)店門蠢琳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來啊终,“玉大人,你說我怎么就攤上這事傲须±渡” “怎么了?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵泰讽,是天一觀的道長例衍。 經(jīng)常有香客問我,道長已卸,這世上最難降的妖魔是什么肄渗? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮咬最,結(jié)果婚禮上翎嫡,老公的妹妹穿的比我還像新娘。我一直安慰自己永乌,他們只是感情好惑申,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著翅雏,像睡著了一般圈驼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上望几,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天绩脆,我揣著相機(jī)與錄音,去河邊找鬼橄抹。 笑死靴迫,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的楼誓。 我是一名探鬼主播玉锌,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼疟羹!你這毒婦竟也來了主守?” 一聲冷哼從身側(cè)響起禀倔,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎参淫,沒想到半個(gè)月后救湖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡涎才,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年鞋既,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片憔维。...
    茶點(diǎn)故事閱讀 40,503評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡涛救,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出业扒,到底是詐尸還是另有隱情检吆,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布程储,位于F島的核電站蹭沛,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏章鲤。R本人自食惡果不足惜摊灭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望败徊。 院中可真熱鬧帚呼,春花似錦、人聲如沸皱蹦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽沪哺。三九已至沈自,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間辜妓,已是汗流浹背枯途。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留籍滴,地道東北人酪夷。 一個(gè)月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像异逐,于是被迫代替她去往敵國和親捶索。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評論 2 359