Блог

Главная - Вопросы по программированию - Как мне полностью установить filepond в проект Laravel Breeze?

Как мне полностью установить filepond в проект Laravel Breeze?

#php #laravel #filepond

#php #ларавель #файлообменник

Вопрос:

Я получаю сообщение об ошибке, что Filepond не может быть определен при попытке использовать его в моем приложении.

 Uncaught ReferenceError: FilePond is not defined

Я сделал следующие действия, чтобы попытаться настроить Filepond с помощью моего приложения Laravel Breeze.

  1. Запустил команду npm i filepond --save в проекте (и npm запустите dev, чтобы скомпилировать ее!).
  2. Добавлено следующее в resources/js/app.js 
 import * as FilePond from 'filepond'; import 'filepond/dist/filepond.min.css';  window.FilePond = FilePond;
  1. Добавлено @yield('scripts') в мой app.blade.php файл непосредственно перед закрывающим lt;/bodygt; тегом.
  2. Добавил следующий код в мой шаблон лезвия.
 @section('scripts')  lt;scriptgt;  // Get a reference to the file input element  const inputElement = document.querySelector('input[id="avatar"]');   // Create a FilePond instance  const pond = FilePond.create(inputElement);  pond.setOptions({  server: {  url: '{{ route('account.avatar') }}',  process: {  headers: {  'X-CSRF-TOKEN': '{{ csrf_token() }}'  }  }  }  });  lt;/scriptgt;  @endsection

Как еще одна проблема, при попытке добавить @import "~filepond/dist/filepond.min.css"; в мой resource/css/app.css файл NPM не может успешно скомпилироваться, и он сообщает, что не может найти путь, я проверил nodule_modules, и папка filepond там на 100%. (В настоящее время используется версия CDN для CSS Filepond, но она не идеальна!)

Я всегда боролся с тем, чтобы заставить npm работать, я не кэшировал никаких просмотров, поэтому, если кто-нибудь знает, в чем дело, пожалуйста, дайте мне знать!

Комментарии:

1. Привет, у меня нет опыта работы с Laravel, но, похоже, js/app.js файл может не загружаться или загружаться после запуска сценария с шага 4. Я бы начал с добавления инструкций журнала в фрагменты кода, чтобы проверить, все ли работает. Добавление console.log(FilePond) к app.js должен, по крайней мере, сообщить вам, правильно ли он импортирован. Еще один вход на шаге 4, и вы знаете, какой скрипт запускается первым.

Метки: