如何解决AJAX提交图片URL后PHP无法接收但Network预览可见的问题

可能原因及对应解决方案 #

1. 超出POST数据大小限制 #

DataURL是Base64编码格式，体积比原图大30%左右，如果图片尺寸较大，会超出PHP默认的post_max_size或upload_max_filesize限制，导致服务器自动截断数据，$_POST无法获取到完整内容。

解决办法：

• 修改php.ini配置（需服务器权限）：

post_max_size = 20M
upload_max_filesize = 20M

• 或在PHP脚本开头临时设置（若服务器允许动态修改）：

ini_set('post_max_size', '20M');
ini_set('upload_max_filesize', '20M');

2. 请求内容类型解析问题 #

jQuery默认的content-type为application/x-www-form-urlencoded，当DataURL包含大量特殊字符时，可能出现服务器端解析异常。可以改用JSON格式提交，通过php://input获取原始数据。

前端代码修改：

var canvas = document.getElementById('chart1');
var imgData = canvas.toDataURL('image/png', 1);

$.ajax({
    type: "POST",
    url: "?f=view_customer_list",
    contentType: "application/json", // 指定JSON格式
    data: JSON.stringify({ imgData: imgData }),
    success: function(response) {
        alert(response); // 弹出服务器返回的图片URL
    }
});

PHP代码修改：

$rawData = file_get_contents('php://input');
$requestData = json_decode($rawData, true);
$image = $requestData['imgData'];

echo $image;

3. 服务器安全规则拦截 #

部分服务器的安全模块（如mod_security）会将过长的Base64字符串判定为恶意请求，拦截后导致PHP无法接收数据。可以尝试去掉DataURL的前缀减少数据长度，避开拦截。

前端代码修改：

var canvas = document.getElementById('chart1');
// 去掉DataURL的前缀部分
var imgData = canvas.toDataURL('image/png', 1).replace('data:image/png;base64,', '');

$.ajax({
    type: "POST",
    url: "?f=view_customer_list",
    data: { imgData: imgData },
    success: function(response) {
        alert('data:image/png;base64,' + response);
    }
});

PHP代码修改：

// 补回DataURL前缀
$image = 'data:image/png;base64,' . $_POST['imgData'];
echo $image;

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