Передача blob (изображения) в php/laravel, получение ввода и сохранение

Пользователь выбирает img с файлом. Затем я динамически создаю форму с данными img из этого выбранного файла. и поместите его в качестве источника для тега. Позже, когда пользователь нажимает кнопку «Отправить», я создаю объект FormData. И получить блоб из DataUri.

Это код для поиска правильного изображения, его может быть больше одного.

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

Возвращает ноль для меня. То же самое для

$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


javascript php jquery laravel laravel-5
person DaveLV2    schedule 10.02.2015    source источник
comment
Проверьте вкладку сведений о запросе Сеть в своем браузере, чтобы точно узнать, какие полезные данные отправляются на сервер, чтобы убедиться, что вы отправляете то, что ожидаете от JS.   -  person Bogdan    schedule 10.02.2015

Ответы (2)


arrow_upward
1
arrow_downward

Нужно ли преобразовывать URL-адрес данных в blob?

если нет, вы можете загрузить изображение, просто отправив данные uri (base64) изображения в запросе ajax и декодируя его на стороне php

для справки: http://www.codepool.biz/tech-frontier/html5/upload-html-canvas-data-to-php-server.html

person Piyuesh    schedule 10.02.2015
comment
Вы правы, мне это не нужно. Просто быстрый вопрос, могу ли я выбрать любой формат файла? Например, пользователь отправил jpg, как я мог узнать, что я должен сохранить его как jpg? - person DaveLV2; 10.02.2015
comment
Неважно, я только что понял, что в начале есть часть jpg. :D - person DaveLV2; 10.02.2015

arrow_upward
0
arrow_downward

У меня такая же беда, как и у тебя. Я решил это.

вы пытались передать массив и данные формы. как это

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.
}
person 김민혁    schedule 02.03.2017