Php Laravel AJAX图像上载错误：图像源不可读

正在尝试通过AJAX上载图像，但出现问题

表格：

{{ Form::open(array('class' => 'update-insertimage-form', "files" => true,)) }}
    {{ Form::file('image', array('class' => 'update-insertimage-btn', 'name' => 'update-insertimage-btn')) }}
{{ Form::close() }}

而PHP：

$createImage = Image::make(Input::file('update-insertimage-btn'))->orientate();
$createImage->resize(600, null, function ($constraint) {
$constraint->aspectRatio();
});
$createImage->save("user_uploads/cover_images/TEST.jpeg");

jQuery：

$('.update-insertimage-form').submit(function() {
  $(".submit-newupdate-btn").addClass('disabled');
  var rootAsset = $('.rootAsset').html();
  $.ajax({
    url: rootAsset+'saveUploadedImage',
    type: 'post',
    cache: false,
    dataType: 'json',
    data: $('.update-insertimage-form').serialize(),
    beforeSend: function() {
    },
    success: function(data) {
      if(data.errors) {
        $('.modal-body').append('<div class="alert alert-danger centre-text modal-error-message" role="alert"><strong>Error!</strong> '+ data.errors +'</div>');
      } else if (data.success) {
        $(".form-control-addupdate").append(data.name);
      }
    },
    error: function(xhr, textStatus, thrownError) {
        alert('Something went to wrong.Please Try again later...');
    }
  });
return false;
});

---

有什么帮助吗？

您无法序列化图像并传递它，您需要构造一个

FormData

对象并使用它发送图像

var formData = new FormData();
formData.append('update-insertimage-btn[]', $('.update-insertimage-btn')[0].files[0], $('.update-insertimage-btn')[0].files[0].name);

然后，您只需将其作为数据与其他一些选项一起传递到服务器：

data: formData,
processData: false,
contentType: false

现在您可以执行以下操作：

Image::make(Input::file('update-insertimage-btn'))->orientate()

从这里的页面，它正在通过以下检查：

case $this->isDataUrl():
     return $this->initFromBinary($this->decodeDataUrl($this->data));

从该函数返回true：

public function isDataUrl()
{
    $data = $this->decodeDataUrl($this->data);
    return is_null($data) ? false : true;
}

它正在启动抽象函数

initFromBinary

，该函数将decodeDataUrl的结果作为参数传递，decodeDataUrl如下所示：

private function decodeDataUrl($data_url)
{
    $pattern = "/^data:(?:image\/[a-zA-Z\-\.]+)(?:charset=\".+\")?;base64,(?P<data>.+)$/";
    preg_match($pattern, $data_url, $matches);
    if (is_array($matches) && array_key_exists('data', $matches)) {
        return base64_decode($matches['data']);
    }
    return null;
}

私有函数decodeDataUrl（$data\u url）
{
$pattern=“/^data:（？：image\/[a-zA-Z\-\.]+）（？：charset=\“+”）；base64，（？P.+）$/”；
preg\u match（$pattern，$data\u url，$matches）；
如果（是数组（$matches）&&array_key_存在（'data'，$matches））{
返回base64_解码（$matches['data']）；
}
返回null；
}

---

所以它似乎期望该元素是base64编码的图像，而不是原始的二进制图像；因此，Base64在传递图像时对其进行编码，而不是传递

.files[0]

您的javascript代码是什么样子的？真正的AJAX文件上传限制了跨浏览器支持。只是添加了jQueryTanks，但是它抛出了以下内容：{“error”：{“type”：“ErrorException”，“message”：“preg\u match（）期望参数2是字符串，数组给定”，“file”：“\/Applications\/MAMP\/htdocs\/buildsactionary\/vendor\/intervention\/image\/src\/intervention\/image\/AbstractDecoder.php”，“line”：208}}还请注意，以这种方式上载图像在IE版本<10时不起作用

private function decodeDataUrl($data_url)
{
    $pattern = "/^data:(?:image\/[a-zA-Z\-\.]+)(?:charset=\".+\")?;base64,(?P<data>.+)$/";
    preg_match($pattern, $data_url, $matches);
    if (is_array($matches) && array_key_exists('data', $matches)) {
        return base64_decode($matches['data']);
    }
    return null;
}