Вызов функции-члена move() в строке при загрузке файла

Мой бэкэнд laravel не может загрузить или переместить файл в моем каталоге ЗАГРУЗИТЬ ПАПКУ. Я думаю, что мой запрос файла представляет собой строку, поэтому загрузка перемещения не работает. Я не знаю, в этом ли проблема.

Я использую React JS и useLoader Data и Form из react-router-dom в качестве интерфейса. И настроить axiosClient

Вот ошибка на console.info

Сеть

Console.log

Вот мой экспорт по умолчанию ProductAdd

export default function ProductAdd(){
    const [image,setImage] = useState(null)

    const imageHandler = (e) =>{
       setImage(e.target.files[0])
    }

       return(<Form  id = "clear-form" method = "post" replace>
             <div className = "mb-4 relative">
                  <label >
                        File Picture
                    </label>
                 <input name = "image" onChange = {imageHandler} type = "file" />
                </div>
                <div>
                <button type = "submit
                    Create
                </button>
           </Form>)
     }

Вот мой экспорт ProductAddActionLoader

export const ProductAddActionLoader = async({ request }) =>{

    const formData = await request.formData();
    const payload = {
        image:formData.get('image'),
    }

    return await axiosClient.post('admin/fruit/create',payload).
        then(({data})=>{
            console.info(data)
            return data
        }).catch(error=>{
            console.info(error)
            return error
        })
}

Вот мой router.jsx

         path:'create',
         element:<ProductAdd/>,
         action:ProductAddActionLoader

Вот мой ProductController в моем бэкенде

public function create(Request $request){

       //return $request->image;
        $fileName = time().'.'.$request->image;
        $request->image->move(public_path('uploads'), $fileName);
        return response('Data has been Added',200);
    }

но когда я раскомментирую return $request->image, имя изображения возвращается. но это $request->image->move(public_path('uploads'), $fileName); не работает и не загружается в мой путь к каталогу

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
53
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

ты можешь это сделать:

Storage::disk('local')->put('uploads' . '/' . $fileName , $request->image);

он возвращает пустую строку, я использую encType='multipart/form-data'

Ray Paras 05.04.2023 16:07

Я думаю, что вы неправильно передаете файл из js, попробуйте передать файл с помощью этого

 return await axiosClient.post('admin/fruit/create', formData)

вместо

 return await axiosClient.post('admin/fruit/create', payload)
Ответ принят как подходящий

Вам нужно использовать multipart/form-data для загрузки файлов

return await axiosClient.post('admin/fruit/create', payload, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
}).
then(({data})=>{
    console.info(data)
    return data
}).catch(error=>{
    console.info(error)
    return error
})

спасибо я это уже сделал

Ray Paras 12.04.2023 11:39

Другие вопросы по теме