将blob(image）传递给php/lavel并获取输入和保存 - Passing blob(image) to php/laravel and getting input and saving

Passing blob(image) to php/laravel and getting input and saving

用户选择带有文件的img。然后，我用所选文件中的数据img动态创建一个表单。并将其作为标记的源。稍后，当用户按下submit时，我会创建一个FormData对象。并从DataUri获取blob。

这是用于查找正确img的代码，它可以有多个img。

var images = [];
$('#imgDiv'+id+' img').each(function(index, img){
      images[index] = dataURItoBlob(img.src);
});

和dataURItoBlob函数

function dataURItoBlob(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type: 'image/*'});
    }

然后我将img附加到formData。

formData.append('images[]',images);

做这个

var req = new XMLHttpRequest();
req.open('post','/ads/add');
req.send(formData);

和php端。使用laravel我试过这个

$images = Input::file('images[]');

为我返回null。相同

$images = Input::file('images');

当我尝试这个时

$images = Input::get('images');

它以json响应["[object Blob]"]的形式返回或者作为dd（）返回

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=1)</i>
  0 <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'[object Blob]'</font> <i>(length=13)</i>
</pre>

然后我如何将其保存在例如/uploads/images/1

中

是否需要将数据url转换为blob？

如果没有，您可以通过在ajax请求中发送图像的数据uri（base64）来上传图像，并在php端对其进行解码

供参考：http://www.codepool.biz/tech-frontier/html5/upload-html-canvas-data-to-php-server.html

我和你一样遇到了同样的麻烦。我解决了。

您试图使用Array和formData进行传输。像这个

formData.append('images[]',[object1, object2, objec3, ...]);

然而，这是错误的。如果我们想传输很多文件，我们应该这样编码。

$('#imgDiv'+id+' img').each(function(index, img){
      images[index] = img.src;
});

和

for(i=0; i<images.length; i++){    
  var blob = dataURLtoBlob(images[index]);
  formData.append("images[]", blob); // we must use "append" many time.
}