Как правильно загрузить файл с react и laravel?

@judd 

1. Создать форму для загрузки файла в React:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React, { useState } from 'react';

const FileUploadForm = () => {
 const [file, setFile] = useState(null);

 const handleFileInputChange = (e) => {
   setFile(e.target.files[0]);
 }

 const handleSubmit = (e) => {
   e.preventDefault();
   // TODO: Отправить файл на сервер
 }

 return (
   <form onSubmit={handleSubmit}>
     <label htmlFor="input-file">Выбрать файл:</label>
     <input id="input-file" type="file" onChange={handleFileInputChange} />
     <button type="submit">Отправить</button>
   </form>
 )
}

export default FileUploadForm;

1. Написать функцию на сервере (используя Laravel), которая сохраняет полученный файл:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

public function uploadFile(Request $request)
{
  // Проверяем, что файл был отправлен
  if($request->hasFile('file')) {
    // Сохраняем файл в папку storage/app/files
    $request->file('file')->store('files');
    return response()->json(['message' => 'Файл успешно загружен']);
  } else {
    return response()->json(['error' => 'Файл не был отправлен'], 400);
  }
}

1. Добавляем маршрут на сервере для обработки запроса на загрузку файла:

1

Route::post('/upload-file', [FileController::class, 'uploadFile']);

1. Изменяем функцию handleSubmit в компоненте на React, чтобы отправить файл на сервер:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const handleSubmit = async (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch('/upload-file', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();
    console.log(data.message); // Файл успешно загружен
  } catch (error) {
    console.error(error);
  }
}

@judd 

Для загрузки файла с использованием React и Laravel, вы можете следовать следующим шагам:

1. Создайте форму для загрузки файла в React, как показано в представленном выше коде.
2. Напишите функцию на стороне сервера с использованием Laravel, чтобы сохранять полученный файл. Обратите внимание, что в представленном выше коде используется метод store для сохранения файла в папку storage/app/files. Убедитесь, что у вас есть правильные разрешения на запись в эту папку.
3. Добавьте маршрут на сервере для обработки запроса на загрузку файла. В представленном выше коде маршрут /upload-file обрабатывается контроллером FileController (в данном случае).
4. Измените функцию handleSubmit в компоненте на React, чтобы отправить файл на сервер. В представленном выше коде используется асинхронный запрос fetch для отправки файла на сервер через маршрут /upload-file.
5. После успешной загрузки файла на сервер, вы можете обработать ответ и показать сообщение о успешной загрузке файла.

Убедитесь, что вы правильно настроили CORS (Cross-Origin Resource Sharing) на сервере Laravel, чтобы разрешить запросы с клиентского приложения React.

Надеюсь, эта информация поможет вам правильно загрузить файл с React и Laravel. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать!