为何通过AJAX向WordPress传递大于2MB的dataURL会返回400/404错误

问题根因 #

你遇到的2M以上DataURL传输失败的问题，核心原因有3个：

• 仅修改wp-config.php的post_max_size不生效：PHP的upload_max_filesize、Web服务器的请求体上限默认多为2M，优先级高于wp-config中的配置，且很多主机商服务升级时会覆盖之前的自定义参数，导致原本正常的功能失效。
• DataURL编码冗余：Base64编码的DataURL体积比原始二进制文件大33%，2M的原始图片转成DataURL后实际传输体积接近3M，刚好超过默认阈值触发拦截。
• 安全规则拦截：服务器WAF、mod_security等安全组件默认会拦截体积过大的POST请求，直接返回400/404错误。

解决方案 #

1. 补全服务端配置 #

除了post_max_size = 128M，还需要调整以下配置，注意不要仅在wp-config中修改，要直接改php.ini或主机面板的PHP配置项，修改后重启PHP服务/ Web服务器：

; PHP配置
upload_max_filesize = 128M
max_execution_time = 300
max_input_time = 300

• Nginx服务器：在对应站点配置的server块中添加client_max_body_size 128M;，重启Nginx生效。
• Apache服务器：在站点根目录的.htaccess中添加LimitRequestBody 134217728（对应128M的字节数）。
  如果使用托管主机，直接联系主机商确认放开POST请求体积限制。

2. 优化传输方式（推荐） #

放弃直接传输Base64格式的DataURL，改用FormData传输二进制Blob，传输体积减少33%，效率更高且不容易被安全规则拦截，修改后的代码示例如下：

前端AJAX代码

var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
// 将canvas转成二进制Blob
canvas.toBlob(function(blob) {
  var formData = new FormData();
  formData.append('action', 'save_certificate');
  formData.append('image_file', blob, 'certificate.png');

  jQuery.ajax({
    url: ajaxurl,
    type: 'POST',
    data: formData,
    processData: false, // 禁止jQuery序列化数据
    contentType: false, // 禁止jQuery设置Content-Type
    success: function(response) {
      console.log(response);
    },
    error: function(xhr, status, error) {
      console.log(xhr, status, error);
    }
  });
}, 'image/png');

后端处理代码

不需要解码Base64，直接读取上传的文件即可，后续存入媒体库的逻辑更简单：

add_action( 'wp_ajax_save_certificate', 'save_certificate' ); 
function save_certificate(){        
    if(isset($_FILES['image_file'])) {
        // 后续处理文件、存入媒体库的逻辑
        echo 'ok';
    }
    wp_die();
}

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