Как загрузить изображение с некоторым полем?

Question

Я пытаюсь загрузить изображение с некоторым обязательным полем, таким как имя, описание. Когда я вставляю данные без поля изображения, это работает, но при попытке загрузить файл изображения также не происходит вставка данных в базу данных. Может кто-нибудь сказать мне, что может быть не так с моим кодом?

Контроллер

public function store(Request $request)
{
    $this->validate($request, [
        'cat_name' => 'required|max:255',
        'description' => 'required|min:6',
        'cat_pic' => 'required|image|mimes:jpg,jpeg,png',
    ]);

    $fileName = null;

    if ($request()->hasFile('cat_pic')) {

       $file = $request()->file('cat_pic');
       $fileName = time().'.'.$file->getClientOriginalExtension();
       $destinationPath = public_path('/uploads/products/cats/');
       $file->move($destinationPath, $fileName);  
       $this->save();
   }

    Catagories::create([
        'cat_name' => $request->input('cat_name'),
        'description' => $request->input('description'),
        'cat_pic' => $fileName,

    ]);

    Session::flash('alert', __('messages.created'));
    Session::flash('alertClass', 'success');
    return redirect()->route('catagories');
}

View

<div class="col-md-4 offset-5">
<div class="form-group">
    <form role="form" action="<?php echo e('/products/cats') ?>" method="POST" id="createcat" >
        {{ csrf_field() }}
      <p>
        Create New Product Category
      </p>
      <div class="form-group">
        <label for="cat_name">
          Name*:</label>
          <input type="text" class="form-control"
          id="cat_name" name="cat_name" required maxlength="50">
        </div>
        <div class="form-group">
        <label for="cat_pic">Category Image* </label>
    <input data-preview="#preview" class="form-control" name="cat_pic" type="file" id="cat_pic">
    <img class="col-md-6" id="preview" height="100px" width="20px" src="">
  </div>
          <div class="form-group">
            <label for="description">
              Description*:</label>
              <textarea class="form-control" type="textarea" name="description"
              id="description" placeholder="Category Description"
              maxlength="600" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-lg btn-success btn-block" id="btncreatecat">Create</button>

          </form>
      </div>
    </div>

@endsection
@push('scripts')
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#cat_pic").change(function(){
        readURL(this);
    });
</script>

Маршрут

Route::resource('products/cats', 'Admin\CatController');

и немного JQuery для предварительного просмотра изображения

  <script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#cat_pic").change(function(){
        readURL(this);
    });
</script>

Answer 1

вам нужно добавить enctype="multipart/form-data" к тегу <form>.

Как это:

<form role="#" action="#" method="#" id="#" enctype="multipart/form-data">

Таким образом, ваша форма может отправлять иные вещи, кроме текста.

Answer 2

Я понял, что проблема в том, что я просто забыл добавить enctype="multipart/form-data" внутри тега формы.