前端 js 将图片转换为base64 后，传入后端并且将图片存入指定目录

分手后的思念是犯贱 2023-02-12 04:28 21阅读 0赞

前端部分页面：

<div class="layui-form-item">
        <label class="layui-form-label">专题图片</label>
        <div class="layui-input-inline">
            <div class="layui-upload-list">
                <img class="layui-upload-img" name="titleBase64Img" id="base64Img" src="" style="display: none" width="300px" height="300px;">
            </div>
            <input type="file" id="image" lay-verify="required" οnchange="toBase64()" accept="image/jpeg,image/png,image/jpg" class="layui-upload-button">
        </div>
    </div>

前端 js 部分：

function toBase64(){
        var file = document.querySelector('input[type=file]').files[0];
        console.log(file)
        var imgname = file.name;
        var imgNameFlag = imgname.substring(imgname.indexOf(".")+1,imgname.length);
        console.log(imgNameFlag);
        var base64Img;
        var reader = new FileReader();
        reader.onloadend = function () {
            $("#base64Img").attr("style","display:inline-block");
            $("#base64Img").attr("src",reader.result);
            console.log(reader.result);
        };
        if (file) { // 不为空
            reader.readAsDataURL(file); // 和下面的执行时间要有差距不然base64Img 值生取不出来
            setTimeout(function () {
                base64Img = reader.result;
                base64(base64Img,imgNameFlag);
            },12);
        }
    }
    
    function base64 (base64Img,imgNameFlag) {
        console.log("参数"+base64Img);
        var data = {};
        data.base64Img = base64Img;
        data.imgNameFlag = imgNameFlag; // 图片格式
        // 向后端发送请求
        $.ajax({
            async : false,    //表示请求是否异步处理
            type : "POST",    //请求类型
            url : "/doBase64",
            dataType : "json",//返回的数据类型
            data : data,
            contentType : "application/x-www-form-urlencoded", // post的方式请求必须配置这个
            success : function (data) {
                console.log(data);
            },
            error : function (data) {
                console.log("do error...")
            }
        });
    }

后端部分：

@RequestMapping(value = "/doBase64",method = RequestMethod.POST)
    @ResponseBody
    public void doBase64(HttpServletRequest request) {
        String imgIndex = request.getParameter("imgNameFlag");
        String base64Img = request.getParameter("base64Img");
        System.out.println(base64Img);
        System.out.println("图片格式为："+ imgIndex);
        System.out.println(base64Img.substring(0,base64Img.indexOf(",")));;
        System.out.println(base64Img.substring(base64Img.indexOf(",")+1,base64Img.length()));;
        base64Img = base64Img.substring(base64Img.indexOf(",")+1,base64Img.length());
        Base64AndImg.BASE64CodeToBeImage(base64Img,"F:\\img",imgIndex);
    }

工具类：

public static String BASE64CodeToBeImage(String BASE64str,String path,String ext){
        File fileDir = new File(path);
        if (!fileDir.exists()) {
            fileDir.setWritable(true);
            fileDir.mkdirs();
        }
        //文件名称
        String uploadFileName = UUID.randomUUID().toString() + "."+ext;
        File targetFile = new File(path, uploadFileName);
        BASE64Decoder decoder = new BASE64Decoder();
        try{
            OutputStream out = new FileOutputStream(targetFile)
            byte[] b = decoder.decodeBuffer(BASE64str);
            for (int i = 0; i <b.length ; i++) {
                if (b[i] <0) {
                    b[i]+=256;
                }
            }
            out.write(b);
            out.flush();
            return  path+"/"+uploadFileName+"."+ext;
        }catch (Exception e){
            e.printStackTrace();
            return null;
        }
    }

防止图片值太大传入后端值为空的情况，特此增加配置参数如下：

server.tomcat.max-http-post-size=-1

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP将图片转base64编码以及base64图片转换为图片并保存代码

一：图片转base64编码 /图片转换为 base64格式编码/ $img = 'uploads/01.png'; $base64_img = ba

太过爱你忘了你带给我的痛/ 2023年10月18日 21:41/ 0 赞/ 35 阅读

相关 MVC将Base64 保存为图片

前台传来Base64字符串。本来可以直接保存数据库返回给图片但是这样对数据库负担太重传输也费时间。一搬都是存个地址在数据库 public ActionResult

超、凢脫俗/ 2023年10月11日 13:12/ 0 赞/ 70 阅读

相关将base64转换为图片

要将Base64编码的字符串转换为图片，您可以使用编程语言中的Base64解码器和适当的图像处理库。以下是Python的示例代码： import base64

今天药忘吃喽~/ 2023年09月29日 22:29/ 0 赞/ 43 阅读

相关前端 js 将图片转换为base64 后，传入后端并且将图片存入指定目录

前端部分页面： <div class="layui-form-item"> <label class="layui-form-label">专题图片<

分手后的思念是犯贱/ 2023年02月12日 04:28/ 0 赞/ 22 阅读

相关使用Js将图片转换为base64格式-在线示例

图片转base64-[在线工具][Link 1] <!Doctype html> <html> <head> <meta chars

桃扇骨/ 2022年10月17日 00:35/ 0 赞/ 203 阅读

相关 JS前端网页选择图片后，将其图片转换成Base64编码并展示预览

这篇文章也是和以前一样哈，网上很多你可能试过了，那就看这篇啦！ 1.这是我前端的代码，有一个img标签，用来显示图片用的，还有一个 input type是file的输入框

谁借莪１个温暖的怀抱￠/ 2022年10月03日 01:52/ 0 赞/ 369 阅读

相关将图片转换为Base64编码字符串、解析Base64编码字符串后生成图片

目录代码结果注意代码 public class Test { pu

深碍√TFBOYSˉ_/ 2022年09月10日 06:14/ 0 赞/ 331 阅读

相关将图片转换成Base64

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年07月13日 11:09/ 0 赞/ 276 阅读

相关将base64数据流文件转换为图片文件

前后端交互处理图片的时候，会出现这样的情况：前端传递给我们后端的是base64的图片数据流，我们需要做的就是将它转为图片并且保存起来，根据需要再决定是否将图片存储路径信息

àì夳堔傛蜴生んèń/ 2022年06月02日 12:23/ 0 赞/ 1462 阅读

相关将图片转换成base64

data:图片类型;base64,图片二进制Buffer.toString('base64') 图片类型可以使用mime库根据图片后缀进行转换 ba

r囧r小猫/ 2021年07月24日 20:43/ 0 赞/ 792 阅读