Vanilla Javascript Canvas裁剪后AJAX上传图片请求负载为空

AI 小北

2026-9-29

问题排查与解决方法

移除所有手动设置的Content-Type请求头

使用FormData上传文件时，浏览器会自动生成带boundary分隔符的multipart/form-data请求头，手动设置Content-Type会丢失boundary参数，导致浏览器无法正确序列化FormData、后端无法解析请求体。你测试的三种请求头设置全部是错误的，直接删掉所有xhr.setRequestHeader设置Content-Type的代码即可。

改为异步XHR请求

你当前使用的是同步XHR（xhr.open第三个参数为false），火狐浏览器对同步请求传输二进制/文件类型数据存在限制，是payload丢失的核心诱因之一。把xhr.open("POST", "AJAX.portal.php", false)改成xhr.open("POST", "AJAX.portal.php", true)，同时在onreadystatechange回调中补充xhr.readyState === 4的判断，再处理返回结果。

修正File对象的创建逻辑

canvas.toDataURL返回的是base64格式的字符串，不是二进制数据，直接传入File构造函数会导致文件内容是base64文本而非图片二进制，需要先把base64转成Blob再创建File，示例代码如下：

// dataURL转Blob工具方法
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

// 替换原有File创建逻辑
const imgBlob = dataURLtoBlob(CroppedIMG);
const imgFile = new File([imgBlob], ImageName, {type: 'image/jpeg'});
formData.append('Images[]', imgFile, ImageName);