Как загрузить изображение с помощью FilePond? - PullRequest
Новая
       8

Как загрузить изображение с помощью FilePond?

0 голосов
/ 20 января 2020

У меня есть приложение Laravel, поэтому мне нужно загрузить изображение для категории, я использую библиотеку FilePond

Когда я загружаю изображение в интерфейс, все в порядке с библиотекой но когда сделаю dd() для моего запроса, я получил этот массив: 

array:5 [▼
  "_token" => "KyEk4ha6UbMSG0WfYjD84wcUZU188pv1OK5utwrt"
  "name" => "d"
  "category_news_id" => "6"
  "desc" => "f"
  "image" => null
]

проблема с изображением всегда показывает ноль, даже если я загрузил изображение! Например:

enter image description here

html код: 

 <input type="file" name="image" class="my-pond">

$(function(){
    FilePond.registerPlugin(FilePondPluginImagePreview);
    $('.my-pond').filepond();
});

1 Ответ

0 голосов
/ 21 января 2020

Файл Blade 

<label>Upload Image:</label> 
<input type="file" class="filepond" name="image" accept="image/png, image/jpeg, image/gif"/>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
     <!-- include FilePond plugins -->
 <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
        <!-- include FilePond jQuery adapter -->
 <script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
          <script>
          FilePond.registerPlugin();
          var element = document.querySelector('meta[name="csrf-token"]');
          var csrf = element && element.getAttribute("content");
          FilePond.setOptions({
            server: {
                  url: "{{ url('upload')}}",
                  process: {
                      headers: {
                        'X-CSRF-TOKEN': csrf 
                      },
                  }
              }
          });
          const inputElement = document.querySelector('input[name="image"]');
          const pond = FilePond.create( inputElement);
          </script>

Файл маршрута: 

Route::post('upload', 'AccountController@imageup')->name('upload');

Контроллер Logi c: 

public function imageup(Request $request) {
        if($request->hasFile('image')) 
        {  
            $file = $request->file('image');
            $filenameWithExt = $request->file('image')->getClientOriginalName();
            $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
            $extension = $request->file('image')->getClientOriginalExtension();
            $fileNameToStore = $filename . '_' . date('mdYHis') . uniqid() . '.' . $extension;
            $path = $request->file('image')->storeAs('public/profile-image/', $fileNameToStore);
            return $data['image'] = $fileNameToStore;
        }
    }

Вставка имени файла в базу данных: 

$user->image = $request->get('image');
$user->save();
...