@judd
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 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
|
Route::post('/upload-file', [FileController::class, 'uploadFile']); |
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, вы можете следовать следующим шагам:
Убедитесь, что вы правильно настроили CORS (Cross-Origin Resource Sharing) на сервере Laravel, чтобы разрешить запросы с клиентского приложения React.
Надеюсь, эта информация поможет вам правильно загрузить файл с React и Laravel. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать!