前端将图片转换为base64位，使用ajax传递到后台，但是图片经过base64转换成字符串后非常长，无法使用ajax

Posted 2023-04-23

前端将图片转换为base64位，使用ajax传递到后台，但是图片经过base64转换成字符串后非常长，在使用ajax传递时就出现问题，请问有什么解决办法吗？

前端JS
var reader = new FileReader();
reader.onload = function (e)
//图片base64数据
var imgBase64Data = e.target.result;
var pos = imgBase64Data.indexOf("4")+2;
imgBase64Data = imgBase64Data.substring(pos, imgBase64Data.length - pos);//去掉Base64:开头的标识字符
$.ajax(
type: "POST",
url: "http://imginapi.com/image/AddImage",
async: false,
xhrFields: withCredentials: true ,
data: 'base64StrImgData': imgBase64Data, 'imgFormat': fileext,
dataType: "text",
success: function (data)
alert(data);
domUtils.on(iframe, 'load', callback);
,

error: function (err)
alert("error");
alert(err.responseText);


);
return;

;
reader.readAsDataURL(input.files[0]);

后台C#代码:
/// <summary>
/// 图像转换为Base64编码
/// </summary>
/// <param name="image">图像</param>
/// <param name="format">图像格式</param>
/// <param name="throwException">出现异常时是否抛出</param>
/// <returns>转换成功返回其Base64编码；失败返回空串</returns>
public static string ImageToBase64(System.Drawing.Image image, ImageFormat format, OPResult opRes, bool throwException = false)

return ExceptionHelper.ExceptionRecord(() =>

string base64String = "";
try

using (MemoryStream ms = new MemoryStream())

image.Save(ms, format);
byte[] imageBytes = ms.ToArray();
base64String = Convert.ToBase64String(imageBytes);


catch (Exception ex)

throw new Exception("将图片转成base64字符串时出现异常:" + ex);


return base64String;
, opRes, throwException);
参考技术A

前端生成的代码最终格式如下：

data:image/png;base64,xxxxxxxxxx...........

后端这样解码

base64=base64.Replace("data:image/png;base64,", "");

byte[] bytes =Convert.FromBase64String(base64);

MemoryStream memStream = new MemoryStream(bytes);

BinaryFormatter binFormatter = new BinaryFormatter;

return(System.Drawing.Image)binFormatter.Deserialize(memStream);

string base64Str = "图片的BASE64字符串";

byte[] bytes = System.Convert.FromBase64String(base64Str);

using (System.IO.MemoryStream ms = new System.IO.MemoryStream(bytes))

return System.Drawing.Image.FromStream(ms);

ajax(,url : form.action,,type : "POST",,data : formData,

dataType:"text",,processData : false,,success:function(data).window.location.href="$ctx"+data;

xhr:function//在jquery函数中直接使用ajax的XMLHttpRequest对象

var xhr = new XMLHttpRequest

xhr.upload.addEventListener

参考技术B 如果你用的是tomcat 报request header too large 的错，就在tomcat的config/server.xml里设置最大头大小 参考技术C 非得用ajax吗 参考技术D

有一别人的解决类似情况的链接，也许对你有帮助：

ajax的post提交参数长度超出限制的解决办法

可以看看是否有帮助。如果有需要，请继续交流（有段时间没有用ajax之类的东西了，有些生疏）。谢谢

base64转换成图片

前端代码JS: 前端图片为canvsa绘图转base64格式

function putTextInfo() {
    var canvasImg = painting.canvas.toDataURL(‘image/png‘, 0.8).substring(22); // canvas图片.草图
    var cName = $("#username").val();//客户姓名
    var provinceid = $("#provice").val();//客户地址,省id
    var cityid = $("#city").val();//客户地址,市id
    var countyid = $("#county").val();//客户地址,县id
    var townid = $("#town").val();//客户地址,镇id
    var villageid = $("#village").val();//客户地址,村id
    var cAddress = $(‘.detailAddress‘).val();//详细地址
    var shopName = $(‘.shopname‘).val();//店铺名称
    var cTell = $(‘.phonenum‘).val();//联系电话
    var weiXin = $(‘.wxnum‘).val();//微信号码
    var remarks = $(‘.remark‘).val();//备注信息
    var idCard = $(‘.idnum‘).val();//身份证号
    var layerhight = $(‘.layerh‘).val();//层高
    var beamunder = $(‘.ldown‘).val();//梁下
    var beanover = $(‘.lup‘).val();//梁上
    var officecolor = $(‘.officeColor‘).val();//办公区色系
    var lovelycolor = $(‘.beautyColor‘).val();//美容区色系
    var machinecolor = $(‘.machineColor‘).val();//机修区色系
    var officelight = $(‘.officeModelling‘).val();//办公区灯光造型
    var lovelylight = $(‘.beautyModelling‘).val();//美容区灯光造型
    var machinelight = $(‘.machineModelling‘).val();//机修区灯光造型
    var sign = $(‘.sign‘).val();//招牌
    var yesorBasement = $(":radio[name=yesorBasement]:checked").val();//是否有地下室,1有/2无
    var yesorGas = $(":radio[name=yesorGas]:checked").val();//是否有水管或煤气管道:1有2没有
    var dtId = $("#color-select").val();//汽保店类型
    var length = $(‘.length‘).val();//场地长度
    var width = $(‘.width‘).val();//场地宽度
    var otherinfo = $(‘.width‘).val();//其他要求
    $.ajax({
        type: "POST",//请求类型
        url: path+"/draw/putSketch",//请求的url
        data:{canvasImg:canvasImg,cName:cName,provinceid:provinceid,cityid:cityid,countyid:countyid,townid:townid,villageid:villageid,cAddress:cAddress,shopName:shopName,cTell:cTell,weiXin:weiXin,remarks:remarks,idCard:idCard,layerhight:layerhight,beamunder:beamunder,beanover:beanover,officecolor:officecolor,lovelycolor:lovelycolor,machinecolor:machinecolor,officelight:officelight,lovelylight:lovelylight,machinelight:machinelight,sign:sign,yesorBasement:yesorBasement,yesorGas:yesorGas,dtId:dtId,length:length,width:width,otherinfo:otherinfo},//请求参数
        dataType: "json",//ajax接口（请求url）返回的数据类型
        async : false, //同步方式
        success: function (data) {//data：返回数据（json对象）
            if(data.message=="error"){
                errerInformation(data.data);
            }
            if(data.message=="style"){
                errerInformation(data.data,path+"/draw/matchDesignSketch");
            }
            if(data.message=="noStyle"){
                errerInformation("请选择装修风格!",path+"/decorationStyle/styleList");
            }
        }
    });
}

后台代码：

import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
import java.io.*;

/**
 * @Auther: lanhaifeng
 * @Date: 2018/9/20 0020 16:07
 * @Description:base64,图片互转工具类
 */
public class Base64ConvertImageUtil {


    /**
     * base64字符串转化成图片
     * 对字节数组字符串进行Base64解码并生成图片
     * @param imgStr base64字符码
     * @param folderName 文件类型文件夹名
     * @param subfolderName 文件类型子文件名,注意前缀要+“/”
     * @param fileName 文件名称,注意前缀要加“/”
     * @return
     */
    public static String GenerateImage(String imgStr,String folderName,String subfolderName, String fileName) {
        String result=null;
        if (imgStr != null && !("").equals(imgStr) ) {
            //解决后台接收base64编码出现空格的问题,核心问题
            String sst = imgStr.replace(" ", "+");
            byte[] b;
            try {
                b = new BASE64Decoder().decodeBuffer(sst);
                for (int i = 0; i < b.length; ++i) {
                    if (b[i] < 0) {
                        // 调整异常数据
                        b[i] += 256;
                    }
                }
                String savePath = FolderPathUtil.SAVE_DATABASE_PATH + folderName + subfolderName + "/" + fileName;//数据库保存文件路径
                //生成png图片路径
                String realPath = FolderPathUtil.ABSOLUTE_PATH + FolderPathUtil.SAVE_DATABASE_PATH + folderName + subfolderName;//文件物理保存路径
                File file=new File(realPath);
                if(!file.exists()){
                    file.mkdirs();
                }
                OutputStream os = new FileOutputStream(realPath+"/"+fileName);
                os.write(b);
                os.flush();
                os.close();
                result = savePath;//成功返回路径
            } catch (IOException e2) {
                e2.printStackTrace();
            }
        }
        return result;
    }


    /**
     *  图片转化成base64字符串
     * @param imgFile 待处理的图片全路径,注意实际路径要加:E:/images/
     * @return
     */
    public static String GetImageStr(String imgFile) {
        imgFile="E:/images/"+imgFile;//物理储存路径=物理盘符+数据库存储路径
        InputStream in = null;
        byte[] data = null;
        //读取图片字节数组
        try {
            in = new FileInputStream(imgFile);
            data = new byte[in.available()];
            in.read(data);
            in.close();
        }
        catch (IOException e) {
            e.printStackTrace();
        }
        //对字节数组Base64编码
        BASE64Encoder encoder = new BASE64Encoder();
        return encoder.encode(data);//返回Base64编码过的字节数组字符串
    }

}

controller层接收用字符串

@RequestParam(required=false,value = "canvasImg") String canvasImg