jquery - Laravel 5.8 多张图片上传

Question

我是开发网站的新手，我真的很想学习！我无法弄清楚如何上传多张图片。我正在构建一个食谱应用程序，我目前在我的 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!');

如果用户选择上传，我正在尝试在我的数据库表“recipes”中创建“recipeImage”列以保存多个图像。我在网上找到了一些东西，但都涉及修改我的整个代码以使用 jQuery 插入数据库。有没有办法在我的控制器中做到这一点？还是我必须使用 jQuery 之类的东西才能使其工作？

谢谢！

标签： jquerymysqllaraveleloquent

Answer 1

最好的方法是为recipe_images上传的多个图像创建不同的表，并使表foreign key中具有Recipe关系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('App\RecipeImages', 'recipe_id', 'id');
    }
}

在您的RecipeImages 模型中：

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

然后在你的刀片文件中：

<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] && $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>