将 blob(image) 传递给 php/laravel 并获取输入和保存
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28436614/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing blob(image) to php/laravel and getting input and saving
提问by DaveLV2
User selects img with file. I then dynamically create a form with data img from that selected file. and place it as source for tag. Later when user presses submit I create a FormData object. And get a blob from DataUri.
用户选择带有文件的 img。然后我从所选文件动态创建一个带有数据 img 的表单。并将其作为标签的来源。稍后当用户按下提交时，我创建了一个 FormData 对象。并从 DataUri 获取一个 blob。
This is the code for finding the right img,it can have more then one.
这是找到正确 img 的代码，它可以有多个。
var images = [];
$('#imgDiv'+id+' img').each(function(index, img){
images[index] = dataURItoBlob(img.src);
});
And the dataURItoBlob function
和 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/*'});
}
Then I append the img to formData.
然后我将 img 附加到 formData。
formData.append('images[]',images);
and do this
并这样做
var req = new XMLHttpRequest();
req.open('post','/ads/add');
req.send(formData);
And php side. Using laravel I tried this
和php方面。使用 laravel 我试过这个
$images = Input::file('images[]');
Returns null for me. Same for
为我返回 null。同为
$images = Input::file('images');
When i try this
当我尝试这个时
$images = Input::get('images');
it returns as json response ["[object Blob]"] or as a dd() it returns
它作为 json 响应 ["[object Blob]"] 或作为 dd() 返回
<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=1)</i>
0 <font color='#888a85'>=></font> <small>string</small> <font color='#cc0000'>'[object Blob]'</font> <i>(length=13)</i>
</pre>
How could i then save it in for example /uploads/images/1
我怎么能把它保存在例如 /uploads/images/1
采纳答案by Piyuesh
Is it necessary to convert data url to blob ?
是否有必要将数据 url 转换为 blob ？
if not you can upload the image by just sending data uri (base64) of image in ajax request and decode it at php side
如果没有，您可以通过在ajax请求中发送图像的数据uri（base64）并在php端解码来上传图像
for reference : http://www.codepool.biz/tech-frontier/html5/upload-html-canvas-data-to-php-server.html
供参考：http: //www.codepool.biz/tech-frontier/html5/upload-html-canvas-data-to-php-server.html
回答by ???
I got same trouble like you. I solved it.
我遇到了和你一样的麻烦。我解决了。
you were try to transfer with an Array and a formData. like this
您尝试使用 Array 和 formData 进行传输。像这样
formData.append('images[]',[object1, object2, objec3, ...]);
However, it was wrong. if we want to transfer lots of files, we should code like this.
然而，这是错误的。如果我们要传输大量文件，我们应该这样编码。
$('#imgDiv'+id+' img').each(function(index, img){
images[index] = img.src;
});
and
和
for(i=0; i<images.length; i++){
var blob = dataURLtoBlob(images[index]);
formData.append("images[]", blob); // we must use "append" many time.
}
