Загрузка изображения Laravel 10 с ошибкой проверки Ajax ⇐ Php
-
Гость
Загрузка изображения Laravel 10 с ошибкой проверки Ajax
Я хочу загрузить изображение без отправки формы, используя ajax и laravel-10. Я создал контроллер маршрута и модель и отправил файл в контроллер laravel с помощью функции Ajax. Но при проверке мой загружаемый файл (изображение) отклоняется с сообщением «Поле изображения является обязательным.» ниже приведена моя функция контроллера и сценарий отправки изображения.
ProductController.php
публичная функция store_image(Request $request): JsonResponse { $request->проверить([ 'image' => 'обязательно|изображение|mimes:jpeg,png,jpg,gif,svg|max:2048' ]); $imageName = time().'.'.$request->image->extension(); $request->image->move(public_path('images/products'), $imageName); if($request->hasFile($imageName)){ вернуть ответ()->json([ 'product_image_name' => $imageName, ]); } еще { вернуть ответ()->json([ 'product_image_name' => ЛОЖЬ, ]); } } Создать.blade.php
@extends('layouts.app') @section('content') {{ __('СОЗДАТЬ ПРОДУКТ') }} @csrf {{ __('Название') }} @error('название') {{ $message }} @enderror {{ __('Описание') }} @error('описание') {{ $message }} @enderror {{ __('Цвет') }} {{__('Выберите цвет продукта') }} @foreach($colors как $color) id}}>{{$color->color}} @endforeach @error('цвет') {{ $message }} @enderror {{ __('Размер') }} {{__('Выберите размер продукта') }} @foreach($sizes как $size) id}}>{{$size->размер}} @endforeach @error('размер') {{ $message }} @enderror {{ __('Изображение') }} {{ __('Только: jpeg,png,jpg,gif,svg. Макс: 2048') } ЗАГРУЗИТЬ {{ __('СОЗДАВАТЬ') }} /*------------------------------------------- -------------------------------------------- Создание пользовательского предварительного просмотра -------------------------------------------- --------------------------------------------*/ $("#inputImage").change(function () { пусть читатель = новый FileReader(); reader.onload = (e) => { $("#preview-image").attr("src", e.target.result); }; readAsDataURL(this.files[0]); }); $("#image-upload").click(function (e) { е.preventDefault(); var ProductImage = document.getElementById("inputImage").files[0]; var ProductImage = $("#inputImage").prop("files")[0]; вар form_data = новый FormData (); form_data.append("изображение", ProductImage); //console.log(productImage); $.ajax({ тип: "пост", url: "{{ маршрут('upload-product-image') }}", заголовки: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"), }, mimeType: "multipart/form-data", данные: form_data, //{ 'image': ProductImage} , кеш: ложь, данные процесса: ложь, успех: функция (данные) { alert("Изображение успешно загружено"); }, ошибка: функция (сообщение) { alert("Не удалось загрузить изображение"); }, }); }); @endsection
Я хочу загрузить изображение без отправки формы, используя ajax и laravel-10. Я создал контроллер маршрута и модель и отправил файл в контроллер laravel с помощью функции Ajax. Но при проверке мой загружаемый файл (изображение) отклоняется с сообщением «Поле изображения является обязательным.» ниже приведена моя функция контроллера и сценарий отправки изображения.
ProductController.php
публичная функция store_image(Request $request): JsonResponse { $request->проверить([ 'image' => 'обязательно|изображение|mimes:jpeg,png,jpg,gif,svg|max:2048' ]); $imageName = time().'.'.$request->image->extension(); $request->image->move(public_path('images/products'), $imageName); if($request->hasFile($imageName)){ вернуть ответ()->json([ 'product_image_name' => $imageName, ]); } еще { вернуть ответ()->json([ 'product_image_name' => ЛОЖЬ, ]); } } Создать.blade.php
@extends('layouts.app') @section('content') {{ __('СОЗДАТЬ ПРОДУКТ') }} @csrf {{ __('Название') }} @error('название') {{ $message }} @enderror {{ __('Описание') }} @error('описание') {{ $message }} @enderror {{ __('Цвет') }} {{__('Выберите цвет продукта') }} @foreach($colors как $color) id}}>{{$color->color}} @endforeach @error('цвет') {{ $message }} @enderror {{ __('Размер') }} {{__('Выберите размер продукта') }} @foreach($sizes как $size) id}}>{{$size->размер}} @endforeach @error('размер') {{ $message }} @enderror {{ __('Изображение') }} {{ __('Только: jpeg,png,jpg,gif,svg. Макс: 2048') } ЗАГРУЗИТЬ {{ __('СОЗДАВАТЬ') }} /*------------------------------------------- -------------------------------------------- Создание пользовательского предварительного просмотра -------------------------------------------- --------------------------------------------*/ $("#inputImage").change(function () { пусть читатель = новый FileReader(); reader.onload = (e) => { $("#preview-image").attr("src", e.target.result); }; readAsDataURL(this.files[0]); }); $("#image-upload").click(function (e) { е.preventDefault(); var ProductImage = document.getElementById("inputImage").files[0]; var ProductImage = $("#inputImage").prop("files")[0]; вар form_data = новый FormData (); form_data.append("изображение", ProductImage); //console.log(productImage); $.ajax({ тип: "пост", url: "{{ маршрут('upload-product-image') }}", заголовки: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"), }, mimeType: "multipart/form-data", данные: form_data, //{ 'image': ProductImage} , кеш: ложь, данные процесса: ложь, успех: функция (данные) { alert("Изображение успешно загружено"); }, ошибка: функция (сообщение) { alert("Не удалось загрузить изображение"); }, }); }); @endsection
Мобильная версия