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

Question

问题:在上传大型图像文件时，我发现在具有 1gb 内存 的 AWS 服务器 上上传时会使用其全部容量，使用量高达 932 mb 会导致进程崩溃。我以 DataURI 的形式保存该图像，然后我在某处读到以 blob 的形式保存它可以解决我的问题。所以我想将该 blob 附加到 formData 并发送到服务器，这就是我提出这个问题的原因。但是，如果有关同一问题的任何其他建议，以便在考虑内存时更有效地保存图像，我们将不胜感激。

动机

我想以 blob 的形式将图像发送到服务器端。

我做了什么

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

JAVASCRIPT:

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'] 显示 null。

我需要的解决方案:

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

我已尽一切努力来实现我的动机。

感谢社区的帮助。

Answer 1

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

cache: false,
contentType: false,
processData: false

然后不要在 Ajax 调用的 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”的使用而言。它返回请求 header 之后的所有原始数据，并且不关心它们是什么类型，这在大多数情况下非常方便。而 $_POST 只会包装已通过以下内容类型传递的数据:

• application/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");