如何将附加在 formData 中的 blob 发送到 php

Question

问题：在上传大型图像文件我认识到，虽然在我的上载AWS server有1gb memory使用它的全部能力，它会高达932 mb使用导致崩溃的过程。我以 DataURI 的形式保存该图像，然后我在某处阅读以 的形式保存它blob可以解决我的问题。所以我想将该 blob 附加到 formData 并发送到服务器，这就是我提出这个问题的原因。但是，如果有关于相同问题的任何其他建议，以便在内存方面以更有效的方式保存图像，将不胜感激。

动机

我想将图像以blob.

我做了什么

我目前正在将dataURI其转换为blob. 此外，我将该 blob 附加到formData并尝试使用 ajax 将其发送到服务器端/php。

爪哇脚本：

function convertURIToImageData(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
  var byteString;
  if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
  else
    byteString = unescape(dataURI.split(',')[1]);

// separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

// write the bytes of the string to a typed array
  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  return new Blob([ia], {type:mimeString});
 }
//
const dataURIconverter = () =>{
  let img;
  var image = new Image();
  image.crossOrigin = 'anonymous'; // cross domain
  // create an empty canvas element
  var canvas = document.createElement("canvas"),
    canvasContext = canvas.getContext("2d");

  image.onload = function () {
    //Set canvas size is same as the picture
    canvas.width = image.width;
    canvas.height = image.height;
    // draw image into canvas element
    canvasContext.drawImage(image, 0, 0, image.width, image.height);
    // get canvas contents as a data URL (returns png format by default)
    var dataURL = canvas.toDataURL();
    // console.log(dataURL)
    let blob = convertURIToImageData(dataURL)
    console.log(blob)
    var formData = new FormData();
    formData.append('blobImage',blob)
    $.ajax({
        type: 'POST',
        url: 'check.php',
        data: formData,
        processData: false
    }).done(function(data) {
        console.log(data);
    })
  }
    image.src = "https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg"
 }

 dataURIconverter()

PHP

<?php

  var_dump($_POST['blobImage'])
  var_dump($_POST);
        //var_dump($_FILES['image']);

  //$name = $_FILES['image']['tmp_name'];
 //echo $name;
 //echo $_FILES['image']['tmp_name'];

 //$status = move_uploaded_file($name, $_FILES['image']['name']);

//echo 'successfully stored at '.$_SERVER['HTTP_HOST'];
?>

错误

我在控制台中收到 null 并且我还检查了我看到的formData带有名称 的标题

如您所见，$_POST显示 blob 但$_POST['blobImage']显示为空。

我需要的解决方案：

我不是那么快，php所以我不确定我是否blob以正确的方式发送或接收它。

我已竭尽全力实现我的动机。

感谢社区的帮助。

Answer 1

在 jQuery Ajax 调用中添加以下三个属性，它们是 blob 所必需的：

cache: false,
contentType: false,
processData: false

然后不要在 Ajax Call 的 data 属性中使用formData，您只需添加您创建的 blob 即可。还添加一个小的渲染回调（除了您已经使用的 console.log）来打印图像。你的 AJAX 调用是这样的：

    $.ajax({
        type: 'POST',
        url: 'check.php',
        data: blob,
        cache: false,
        contentType: false,
        processData: false
    }).done(function(data) {
        document.write("<img src='"+data+"'></img>");
    })

将您的 PHP 代码更改为以下内容：

<?php
  $res = file_get_contents("php://input");
  echo "data:image/jpg;base64,".base64_encode($res);
?>

就“ php://input ”的使用而言。它返回请求标头之后的所有原始数据，并且不关心它们是什么类型，这在大多数情况下非常方便。而$_POST只会包装已经通过以下 Content-Types 传递的数据：

• 应用程序/x-www-form-urlencoded
• 多部分/表单数据

如果你真的想使用FormData那么你可以将请求更改为以下内容：

$.ajax({
    type: 'POST',
    url: 'check.php',
    data: formData,
    cache: false,
    contentType: false,
    processData: false
}).done(function(data) {
    console.log(data);
})

而且您还应该更改您的 PHP 文件以获取$_FILE。以这种方式发送数据，请求的Content-Type将是“multipart/form-data”，它将在$_FILES上有 blob、图像和一般文件，其余在$_POST 上，因此“ php://input ”不会有帮助。

<?php
  var_dump($_FILES);
?>

还要记住，当以这种方式上传 blob 时，如果您不打算在服务器端生成文件名（在大多数情况下您可能应该这样做）并且想要由上传者指定的特定名称，它们将获得一个随机名称，然后您可以将它与 FormData 一起传递，例如：

formData.append('blobImage',blob, "MyBloBName");