AJAX POST上传/返回Base64字符串至SQL数据库格式异常问题

问题概述 #

• 通过AJAX POST将Canvas生成的Base64字符串存入SQL数据库（已设置MEDIUMTEXT类型）
• 数据库中存储的Base64字符串存在随机换行，AJAX返回后赋值给图片src时触发错误：

  获取 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gKgSUNDX1... 时出现 net::ERR_INVALID_URL 错误

• 硬编码的Base64可正常显示，返回的字符串内容与原内容一致但含换行，问题根源在上传环节

解决步骤 #

1. 上传前清理Base64字符串 #

Base64规范不允许包含换行或空白字符，上传前先移除所有空白（包括换行、空格、制表符）：

// 获取Base64字符串
let canvas = picCheckIn.getContext("2d");
let dataURL = canvas.canvas.img.src;
// 提取纯Base64部分并清理空白
let base64Str = dataURL.replace(/^data:image\/jpeg;base64,/, '').replace(/\s/g, '');

如果你的dataURL已经是纯Base64（不带data:image/jpeg;base64,前缀），直接执行replace(/\s/g, '')即可。

2. 配置AJAX请求的Content-Type #

确保AJAX请求的内容类型正确，避免传输过程中自动添加换行：

// 示例AJAX请求（替换为你的实际接口）
let xhr = new XMLHttpRequest();
xhr.open('POST', '/your-upload-endpoint', true);
xhr.setRequestHeader('Content-Type', 'application/json');
// 发送清理后的Base64字符串
xhr.send(JSON.stringify({ imageBase64: base64Str }));

如果使用form-data格式，同样要确保字符串未被分割或自动添加换行。

3. 使用参数化查询存入数据库 #

用参数化查询插入数据，避免SQL转义或格式化导致的换行，同时防止SQL注入：

// 后端PHP示例（替换为你的后端语言）
$pdo = new PDO('mysql:host=localhost;dbname=your-db', 'username', 'password');
$stmt = $pdo->prepare('INSERT INTO your-table (image_column) VALUES (:base64)');
$stmt->bindParam(':base64', $_POST['imageBase64'], PDO::PARAM_STR);
$stmt->execute();

同时确保数据库字段的排序规则（collation）为utf8mb4_bin或utf8mb4_general_ci，避免自动格式化字符串。

4. 返回后二次清理（双重保险） #

即使上传环节处理完毕，返回时再做一次清理，避免后端或数据库返回时引入的换行：

let req = Ajax(<POST query here...>);
let results = JSON.parse(req.responseText);
// 清理返回的Base64字符串
let cleanBase64 = results[0][0].replace(/\s/g, '');
// 拼接前缀后赋值（如果返回结果不带前缀）
imgPreviousIn.src = `data:image/jpeg;base64,${cleanBase64}`;

内容的提问来源于stack exchange，提问作者Jack Krebs