Блог

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

RecipeController

 public function store(Request $request)
    {        
        $this->validate($request, [
            'title' => 'required',
            'description' => 'required',
            'ingredients' => 'required',
            'directions' => 'required',
            'recipeImage' => 'image|nullable|max:1999'
        ]);

        // Handle File Upload 
            if($request->hasfile('recipeImage')){
                // Get filename with extension
                $fileameWithExt = $request->file('recipeImage')->getClientOriginalName();
                // Get just filename
                $filename = pathinfo($fileameWithExt, PATHINFO_FILENAME);
                // Get just extension
                $extension = $request->file('recipeImage')->getClientOriginalExtension();
                // Filename to store
                $fileNameToStore = $filename . '_' . time() . '.' . $extension;
                // Upload Image
                $path = $request->file('recipeImage')->storeAs('public/recipe_images', $fileNameToStore);
            } else {
                $fileNameToStore = 'noimage.jpg';
            }

            $recipe = new Recipe;
            $recipe->author = auth()->user()->username;
            $recipe->title = $request->input('title');
            $recipe->description = $request->input('description');
            $recipe->ingredients = $request->input('ingredients');
            $recipe->directions = $request->input('directions');
            $recipe->recipeImage = $fileNameToStore;
            $recipe->prepTime = $request->input('prepTime');
            $recipe->cookTime = $request->input('cookTime');
            $recipe->servings = $request->input('servings');
            $recipe->calories = $request->input('calories');
            $recipe->user_id = auth()->user()->id;

            $recipe->save();

            $recipe->tags()->sync($request->tags, false);

            return redirect('/recipes')->with('success', 'Recipe Posted!');
 

Я пытаюсь сделать столбец «recipeImage» в моей таблице базы данных «recipes» для хранения нескольких изображений, если пользователь решит загрузить. Я нашел несколько вещей в Интернете, но все они включают в себя переработку всего моего кода, чтобы вставить базу данных с помощью jQuery. Есть ли способ сделать это прямо здесь, в моем контроллере? Или я должен использовать что-то вроде jQuery, чтобы заставить его работать?

Спасибо!

Лучший подход — создать другую таблицу recipe_images для загрузки нескольких изображений и сделать foreign key так recipe_id , чтобы в recipe_images таблице с отношением рецепта было много изображений.

Нравится:

таблица рецептов:

 id | author | title | description | etc...
 

таблица recipe_images:

 id | recipe_id | image | timestamps
 

В вашей модели рецепта:

 class Recipe extends Model
{
    public function images()
    {
        return $this->hasMany('AppRecipeImages', 'recipe_id', 'id');
    }
}
 

В вашей модели RecipeImages:

 class RecipeImages extends Model
{
    public function recipe()
    {
        return $this->belongsTo('AppRecipe');
    }
}
 

А затем в вашем блейд-файле:

 <input type="file" name="recipeImage[]" multiple>
 

И контроллер для хранения нескольких изображений в хранилище, а также в БД:

 public function store(Request $request)
{        
    $this->validate($request, [
        'title' => 'required',
        'description' => 'required',
        'ingredients' => 'required',
        'directions' => 'required',
        'recipeImage' => 'image|nullable|max:1999'
    ]);

    $recipe = new Recipe;
    $recipe->author = auth()->user()->username;
    $recipe->title = $request->input('title');
    $recipe->description = $request->input('description');
    $recipe->ingredients = $request->input('ingredients');
    $recipe->directions = $request->input('directions');
    $recipe->prepTime = $request->input('prepTime');
    $recipe->cookTime = $request->input('cookTime');
    $recipe->servings = $request->input('servings');
    $recipe->calories = $request->input('calories');
    $recipe->user_id = auth()->user()->id;
    $recipe->save();

    // Handle multiple file upload
    $images = $request->file('recipeImage');
    foreach($images as $key => $image) {
        if ($request->hasFile('recipeImage')[$key] amp;amp; $request->file('recipeImage')[$key]->isValid()) {
            // store image to directory.
            $path = $request->recipeImage[$key]->store('public/recipe_images/');
            $path = basename($path);

            // store image to database.
            $r_image = new RecipeImages();
            $r_image->recipe_id = $recipe->id;
            $r_image->image = $path;
            $r_image->save();
        } else {
            return redirect()->back()->with('errors', 'Invalid Image file found!');
        }
    }

    $recipe->tags()->sync($request->tags, false);

    return redirect('/recipes')->with('success', 'Recipe Posted!');
}
 

Форма в create.blade.php

 <form method="POST" action="{{ action('RecipesController@store') }}" id="submitRecipeForm" enctype="multipart/form-data">
                @csrf

        <section class="createRecipe">

            <div class="createRecipeLeftBody">
                <div class="photoUploadInput">
                    <label for="imageUpload">
                        <input type="file" id="imageUpload" name="recipeImage[]" multiple>
                    </label>
                    <span>Add a photo of your recipe!</span>
                </div>


            <div class="container">
                <ul class="createRecipeInfo">
                    <div class="row">
                        <div class="col-lg-4">

                                <li>
                                    <label for="prep" class="prep">Prep Time</label>
                                    <input type="text" class="prep" id="prep" name="prepTime">
                                </li>

                                <li>
                                    <label for="cookTime">Cook Time</label>
                                    <input type="text" id="cookTime" name="cookTime">
                                </li>
                            </div><!-- col-lg-6 --> 

                            <div class="col-lg-4">
                                <li>
                                    <label for="servings">Serves: </label>
                                    <input type="text" id="servings" name="servings">
                                </li>

                                <li>
                                    <label for="calories">Calories/serving</label>
                                    <input type="text" id="calories" name="calories">
                                </li>
                            </div>

                    </div><!-- row -->
                    </ul>
                </div>
            </div><!-- container -->


            <div class="createRecipeBody"> 

                    <h2>Create Recipe <hr></h2>
                <fieldset>
                    <small class="errorMessage">{{ $errors->first('title') }}</small>
                    <label for="title">Give your creation a title</label>
                    <input type="text" name="title" id="title">
                </fieldset>

                <fieldset>
                        <small class="errorMessage"></small>
                        <label for="tags">Tags</label>
                        <select name="tags[]" id="tagsList" class="select2-multi" multiple="multiple">
                            @foreach($tags as $tag)
                                 <option value="{{$tag->id}}">{{$tag->name}}</option>
                            @endforeach
                        </select>
                </fieldset>

                <fieldset>
                    <small class="errorMessage">{{ $errors->first('description') }}</small>
                    <label for="description">Describe your creation</label>
                    <textarea name="description" id="description"></textarea>
                </fieldset>

                <fieldset>
                    <small class="errorMessage">{{ $errors->first('ingredients') }}</small>
                    <label for="ingredientList">List the ingredients</label>
                    <textarea name="ingredients" id="ingredientList" placeholder="Please list each ingredient on a seperate line"></textarea>
                </fieldset>

                <fieldset>
                        <small class="errorMessage">{{ $errors->first('directions') }}</small>
                        <label for="ingredientList">Directions</label>
                        <textarea name="directions" id="directions" placeholder="Please list each step on a seperate line"></textarea>
                </fieldset>


                <div class="terms">
                    <label class="authenticationCheck">
                        <input class="termsOfService" type="checkbox">
                        <span>
                            Public Recipe
                        </span>
                    </label>

                    <label class="authenticationCheck">
                        <input class="termsOfService" type="checkbox">
                        <span>Private Recipe</span>
                    </label>
                </div>
                <button class="submitRecipe" type="submit">Share your creation</button>
            </div>
        </section>
</form>