裁剪图像并使用ajax php和simpleCropper.js上传

Question

使用simpleCropper.js裁剪图像并使用ajax在PHP中上传图像在simpleCropper中，图像文件被转换为base64。但尝试上传大的图像文件，它显示错误，如图像损坏或截断。

在ajax响应中显示如下错误:请求实体太大

小裁剪图片上传不正确，存储在10字节大小

在ajax上传文件中，它返回空值。

if (file.type.match(imageType)) {
var reader = new FileReader();
image_filename = file.name;                    
reader.onload = function (e) {
var base64data = reader.result;
$.ajax({
url: "upload.php",
method: "POST",
data: {imagefile: base64data},
dataType:"text",
success: function(data){
console.log(data);                          
}
});

Upload.php 
if(isset($_POST["imagefile"]))
{
$data = $_POST["imagefile"];

$image_array_1 = explode(";", $data);
$image_array_2 = explode(",", $image_array_1[1]);
$data = base64_decode($image_array_2[1]); 

$filename = time() . '.png';
if(stripos($data, 'image/png') !== false) {
$filename = time() . '.png';
} elseif(stripos($data, 'image/jpg') !== false || stripos($data, 'image/jpeg') !== false) {
$filename = time() . '.jpg';
}

$imageName = 'assets/uploads/' . $filename;
file_put_contents($imageName, $data);
echo $filename;
}

Answer 1

Request Entity Too Large是服务器限制。

你没有指定使用的服务器，所以以Nginx为例:

Syntax:  client_max_body_size size;
Default: client_max_body_size 1m;
Context: http, server, location

设置客户端请求正文的最大允许大小。如果请求的大小超过配置值，则返回413 (request Entity Too Large)错误给客户端。请注意，浏览器无法正确显示此错误。设置size为0禁用检查客户端请求正文大小。