Vanilla Javascript、Crop Canvas、通过 AJAX 的图像上传器无法正常工作

Question

我有这个脚本工作，现在它失败了。

var canvas = document.getElementById('CropCanvas');
var CroppedIMG = canvas.toDataURL('image/jpeg', 1.0);
var formData = new FormData();
var xhr = new XMLHttpRequest();
    
formData.append('AJAX_Request', 'ImgUpload');
formData.append('UploadImages', true);
formData.append('ConvertStream', 'image/jpeg');
formData.append('IMGLocation', 'Video');
formData.append('ID', ID);
formData.append('ImagesDir', Folder);
formData.append('ImagesSubDir', SubFolder);

const Image = new File([CroppedIMG], ImageName);

formData.append('Images[]', Image, ImageName);

xhr.open("POST", "AJAX.portal.php", false);

xhr.onreadystatechange = function() {

    if (xhr.status == 200) {

    }

}
xhr.send(formData);

在 Firefox 的控制台中，它显示一个空的有效负载。

如果我注释掉将图像附加到 formData 的行，它会将有效负载发送到服务器，无法弄清楚它为什么不工作，因为它以前工作过。

我也尝试过使用以下标题（不是同时）：

xhr.setRequestHeader("Content-Type", "application/upload");
xhr.setRequestHeader("Content-Type", "multipart-form/data");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

这些都不起作用。

Answer 1

我确实找到了问题，我正在测试的图像大于 2MB，一旦我纠正了这个问题，脚本又开始工作了。