javascript - 将 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[]');

对我来说返回 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

Answer 1

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

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

供引用:http://www.codepool.biz/tech-frontier/html5/upload-html-canvas-data-to-php-server.html