将 blob(image) 传递给 php/laravel 并获取输入并保存

Question

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

这是寻找正确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[]');

Returns 对我来说是空的。

也一样

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

当我尝试这个时

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

它 returns 作为 json 响应 ["[object Blob]"] 或者作为 dd() 它 returns

<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

Answer 1

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

如果没有，您可以通过在 ajax 请求中发送图像的数据 uri (base64) 来上传图像，并在 php 端解码它

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

Answer 2

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

您尝试使用 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.
}

将 blob(image) 传递给 php/laravel 并获取输入并保存

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

javascript

php

jquery

laravel

laravel-5