Пример загрузки файла React Laravel, шаг за шагом

Чтобы загрузить файл с помощью React и Laravel, создайте компонент файла React и бэкэнд в Laravel. Затем используйте библиотеку Axios, чтобы отправить запрос файла на сервер Laravel и сохранить изображение на сервере. В этом руководстве мы загрузим изображение из компонента react js. Сначала мы устанавливаем зависимости с помощью npx, затем загружаем проект laravel.

npx поставляется с npm 5.2+ выше.

React js Laravel File Upload

Сначала мы устанавливаем проект React js.

Шаг 1. Установите проект React js

Откройте терминал и введите следующую команду.

 npx create-response-app fileuploadapp 

Переместитесь в папку проекта с помощью команды cd и запустите сервер разработки одним из следующих кодов.

 npm start или yarn start 

Теперь запускается сервер разработки.

Шаг 2: Создайте Компонент React для загрузки файла.

Перейдите в папку src >> components и создайте новый файл с именем FileUploadComponent. js.

//FileUploadComponent.jsimport React, {Component} из 'react'; экспорт класса по умолчанию FileUploadComponent расширяет Component {render () {return (

File Загрузить

)}}

Затем мы можем добавить FileUploadComponent в Файл App.js .

//App.jsimport React, {Component} из 'react'; импорт FileUploadComponent из './components/FileUploadComponent';class App extends Component {  render () {return (
); }} экспорт приложения по умолчанию;

Шаг 3. Добавьте состояние и событие в компонент.

После добавления состояния и события в FileUploadComponent . js выглядит так, как показано ниже.

//FileUploadComponent.jsimport React, {Component} из 'react'; импорт axios, {post} из 'axios'; экспорт по умолчанию  класс FileUploadComponent расширяет компонент {конструктор (реквизиты) {супер (реквизиты);  this.state = {image: ''} this.onFormSubmit = this.onFormSubmit.bind (это) this.onChange = this.onChange.bind (this) this.fileUpload = this.fileUpload.bind (this)} onFormSubmit (e  ) {e.preventDefault () this.fileUpload (this.state.image);  } onChange (e) {let files = e.target.files ||  e.dataTransfer.files;  если (! files.length) return;  this.createImage (файлы [0]);  } createImage (файл) {let reader = new FileReader ();  reader.onload = (e) => {this.setState ({image: e.target.result})};  читатель. readAsDataURL (файл);  } fileUpload (изображение) {const url = 'http://localhost: 8000/api/fileupload';  const formData = {file: this.state.image} return post (url, formData) .then (response => console.log (response))} render () {return (

React js Laravel File Download Tutorial

)}}

В приведенном выше коде вам требуются

Переключитесь на терминал и введите следующая команда для добавления

 yarn add axios 

Шаг 4: Установите Laravel

Устанавливаем Laravel. Переключитесь на свой терминал и введите следующую команду.

 composer create-project laravel/laravel LaravelReactJSFileUpload --prefer-dist 

Шаг 5: Настройте базу данных.

Добавьте учетные данные своей базы данных в файл .env .

 DB_CONNECTION = mysqlDB_HOST = 127.0.  0.1DB_PORT = 3306DB_DATABASE = laravelreactfileuploadDB_USERNAME = rootDB_PASSWORD = 

Шаг 6. Создайте одну модель и файлы миграции.

 php artisan make:  model Fileupload -m 

Он создаст файлы модели и миграции.

Шаг 7. Определите схему в файле миграции.

Перейдите в файл create_fileuploads_table.php и добавьте в него схему.

 public function up () {Схема:  : create ('fileuploads', function (Blueprint $ table) {$ table-> increments ('id'); $ table-> string ('filename'); $ table-> timestamps ();}));  } 

Шаг 8. Определите маршруты в файле api.php.

Перед определением маршрутов мы можем создать контроллер под названием .

 Route :: resource ('fileupload', 'FileuploadController'); 

Шаг 9: Установите изображение/пакет вмешательства.

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

 композитору требуется вмешательство/изображение 

После установки пакета нам необходимо настроить его в Laravel. Итак, перейдите в файл config >> app.php и укажите поставщика изображений вмешательства.

//app.php'providers '=> [Intervention  Image   ImageServiceProvider :: class,]; 'aliases' => ['Image' => Intervention  Image  Facades  Image :: class,] 

После этого шага нам нужно объявить пакет следующей командой.

 php artisan vendor: publish --provider = "Intervention  Image  ImageServiceProviderLaravel5" 

Теперь мы можем использовать этот пакет в нашем FileuploadController. php .

Шаг 10. Сохраните данные в базе данных с помощью функции Store.

Теперь мы можем сохранить имя файла в базе данных с помощью функции сохранения в файле FileuploadController.php .

//FileuploadController.php  phpnamespace App  Http  Controllers; использовать  Illuminate  Http  Request; использовать App  Fileupload; класс FileuploadController расширяет контроллер {/** * Отображение списка ресурса.  * * @return  Illuminate  Http  Response */public function index () {//}/** * Показать форму для создания нового ресурса.  * * @return  Illuminate  Http  Response */public function create () {//}/** * Сохранение вновь созданного ресурса в хранилище.  * * @param  Illuminate  Http  Request $ request * @return  Illuminate  Http  Response */публичное хранилище функций (Request $ request) {if ($ request-> get ('file')) {$ image = $  запрос-> получить ('файл');  $ name = time (). '.'.  .  explode ('/', explode (':', substr ($ image, 0, strpos ($ image, ';'))) [1]) [1];   Image :: make ($ request-> get ('file')) -> save (public_path ('images/').$ name);  } $ fileupload = новый Fileupload ();  $ fileupload-> имя_файла = $ имя;  $ fileupload-> сохранить ();  return response () -> json ('Успешно добавлено');  }/** * Показать указанный ресурс.  * * @param int $ id * @return  Illuminate  Http  Response */public function show ($ id) {//}/** * Показать форму для редактирования указанного ресурса.  * * @param int $ id * @return  Illuminate  Http  Response */public function edit ($ id) {//}/** * Обновить указанный ресурс в хранилище.  * * @param  Illuminate  Http  Request $ request * @param int $ id * @return  Illuminate  Http  Response */обновление публичной функции (Request $ request, $ id) {//}/** * Удалить  указанный ресурс из хранилища.  * * @param int $ id * @return  Illuminate  Http  Response */public function destroy ($ id) {//}} 

Теперь вы можете запустить сервер разработки Laravel.

Введите следующую команду.

 php artisan serve 

Наконец, пример загрузки файла Laravel в React завершен. Вы можете видеть, что имя изображения хранится в базе данных.

Оцените статью
nanomode.ru
Добавить комментарий