前端 js 图片转换为base64 之后，传入后端并且将图片存入指定的位置

忘是亡心i 2023-02-12 03:29 16阅读 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" onchange="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 条评论，16人围观）

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

相关阅读

相关将base64转换为图片

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

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

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

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

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

相关前端 js 图片转换为base64 之后，传入后端并且将图片存入指定的位置

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

忘是亡心i/ 2023年02月12日 03:29/ 0 赞/ 17 阅读

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

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

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

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

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

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

相关将图片转换成Base64

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

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

相关 Base64图片转换为图片的方式

将base64转换为图片以及图片转换为base64码的工具类 public class base64Change { / @param imgSt

- 日理万妓/ 2022年05月28日 00:36/ 0 赞/ 279 阅读

相关 C#中图片转换为Base64编码，Base64编码转换为图片

region 图片转为base64编码的字符串 public string ImgToBase64String(string Imagefilename)

清疚/ 2022年04月23日 00:58/ 0 赞/ 1487 阅读

相关前端图片在线转换Base64 图片编码Base64

首先讲一下什么是图片Base64编码：简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。为什么要用Base64？我们

比眉伴天荒/ 2021年09月14日 03:02/ 0 赞/ 1101 阅读

相关将图片转换成base64

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

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