将blob（图像）传递给php / laravel并获取输入并保存

Question

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

以下是查找正确图像的代码，它可以有多个。

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/*'});
    }

然后我将图片附加到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路径下？

- DaveLV2

---

请在浏览器的 网络 选项卡中检查请求细节，以确保您从 JS 发送了预期的有效负载到服务器。 - Bogdan

Answer 1

需要将data url转换为blob吗？

如果不需要，您可以通过在ajax请求中发送图像的数据uri（base64）并在php端解码来上传图像。

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

- Piyuesh

---

你说得对，我不需要它。只是一个快速的问题，我可以选择任何文件格式吗？例如，如果用户发布了 jpg 文件，我怎么知道应该将其保存为 jpg？ - DaveLV2

没事了，我刚意识到它开头有jpg部分。 :D - DaveLV2

Answer 2

我遇到了和你一样的问题，但我已经解决了。

你试图使用数组和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.
}

- 김민혁