图片转base64字符串以及页面显示

最新推荐文章于 2024-07-29 14:17:59 发布

阿著

最新推荐文章于 2024-07-29 14:17:59 发布

阅读量339

点赞数

分类专栏：知识点文章标签： java html javascript jquery

本文链接：https://blog.csdn.net/qq_42184121/article/details/109304401

版权

知识点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

/**
*页面提交的图片转base64字符串。
*base64字符串中有\s,\t,\n转义字符，需要用空字符串替换掉他们。
*base64字符串在http传输中，其中的+号会被弄丢，导致图片无法
*正常显示，例如这段代码最后return的时候，如果是redirect重定向
*或者forward转发携带字符串，下一个controller方法接收到的
*base64字符串+号会丢掉
*
**/

    @RequestMapping("/upload")
    public String upload(@RequestParam("image") MultipartFile file, Model model) {
        BASE64Encoder bEncoder = new BASE64Encoder();
        String[] suffixArra = file.getOriginalFilename().split("\\.");
        String preffix = "data:image/jpg;base64,".replace("jpg", suffixArra[suffixArra.length - 1]);
        String base64EncoderImg = null;
        try {
            base64EncoderImg = preffix + bEncoder.encode(file.getBytes()).replaceAll("[\\s*\t\n\r]", "");
        } catch (IOException e) {
            e.printStackTrace();
        }
        model.addAttribute("base64Str", base64EncoderImg);
        return "upload_image";
        //        return "redirect:/index?base64Str?" + base64Str;
    }

//以下是页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.8.3.js"></script>
</head>
<body>
<title>图片上传功能</title>
选择图片:
<form action="/upload" enctype="multipart/form-data" method="post" onsubmit="return beforeSubmit()">

    <input type="file" name="image">
    <input type="submit" value="上传"/>
</form>
<#--如果base64Str为空就显示网图-->
<img id="img"
     src="${base64Str!"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1544667855,450621728&fm=26&gp=0.jpg"}"
     style="margin-top: 30px;width: 300px;height: 150px;"/>
</body>
<script>
    function beforeSubmit() {
        var img = $("input[name='image']").get(0).files[0];

        if (img == undefined || img.size <= 0 || img.name == null) {
            alert("你还没选择图片");
            return false;
        } else {
            return true;
        }
        return false;
    }
</script>
</html>