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

Question

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

动机

我想以dataURI。

的形式将图像发送到服务器端

我做了什么

我目前正在使用blob转换为formData。此外，我将该blob附加到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() 并尝试使用ajax将其发送到服务器端/ php。

JAVASCRIPT：

<?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'];
?>

PHP

formData

错误

我在控制台中收到null，并且我还检查了标题$_POST的标题

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

解决方案我需要：

我不是那么快blob所以我不确定我是以正确的方式发送php artisan passport:client --password 还是接收它。

我已尽我所能为实现自己的动机所做的一切努力。

感谢社区的帮助。

Answer 1

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

cache: false,
contentType: false,
processData: false

然后不要在Ajax Call的data属性中使用 formData ，只需添加创建的blob即可。 还添加一个小的渲染回调（除了你已经使用的console.log之外）来打印Image。你的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：//输入”的使用而言。它返回请求标题之后的所有原始数据，并且它不关心它们的类型，这在大多数情况下非常方便。而 $ _ POST 只包装已使用以下内容类型传递的数据：

• 应用程序/ x-WWW窗体-urlencoded
• 的multipart / form-data的

如果您确实想使用 FormData ，则可以将请求更改为以下内容：

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

您还应该更改PHP文件以获取 $ _ FILE 。以这种方式发送数据，请求的内容类型将是“multipart / form-data”，其中包含 $ _ FILES 上的blob，图像和一般文件在 $ _ POST 上休息，以便“ php：//输入”没有帮助。

<?php
  var_dump($_FILES);
?>

另外请记住，以这种方式上传blob时，如果您不打算在服务器端生成文件名（在大多数情况下您可能应该这样做），并且需要指定特定名称，那么它们将获得一个随机名称通过上传器，您可以将它与FormData一起传递，如：

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

Answer 2

如果在jQuery Ajax调用中设置contentType: false，您仍然可以使用与formData相同的代码，然后通过$_FILES['blobImage']

访问服务器上的文件