如何在 Laravel PHP 7.4 中将图像文件上传到我的数据库

Question

虽然已正确定义路由，但未定义路由时会出现错误。我正在分享我的完整代码。

我的表迁移代码如下；

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateBackgroundImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('background_images', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('background_images');
    }
}

背景图片模型代码如下：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class BackgroundImage extends Model
{
    use HasFactory;

    protected $fillable = [
        'user_id', 'club_id', 'user_type_id', 'image_name', 'default'
    ];
}

我的上传和设置图像的控制器代码如下：

public function uploadBackgroundImage(Request $request)
    {
        dd($request->all());

        $request->validate([
            'image' => 'required|image|mimes:jpg,jpeg|max:2048',
        ]);

        $user = Auth::user();
        $imageName = time() . '.' . $request->image->extension();
        $request->image->move(public_path('background_images'), $imageName);

        // Save image details to database
        $backgroundImage = new BackgroundImage();
        $backgroundImage->user_id = $user->id;
        $backgroundImage->club_id = $user->club_id;
        $backgroundImage->user_type_id = $user->user_type_id;
        $backgroundImage->image_name = $imageName;
        $backgroundImage->save();

        return back()->with('success', 'You have successfully uploaded an image.');
    }

    public function setDefaultBackgroundImage(Request $request)
    {
        $user = Auth::user();
        // Reset current default
        BackgroundImage::where('user_id', $user->id)
            ->where('club_id', $user->club_id)
            ->where('user_type_id', $user->user_type_id)
            ->update(['default' => null]);

        // Set new default
        BackgroundImage::where('id', $request->image_id)->update(['default' => 'selected']);

        return back()->with('success', 'Background image updated successfully.');
    }

govt_menu 查看上传图片的代码：

 <div class="d-flex arabic-font-dir ml-5 pl-5 mt-5 mob-view-background-selection">
                <p class="pr-3 mb-0">Select background of your choice:</p>
                
                <select class="dropdown pr-3" id="background_select">
                    <option value="{{ asset('logos/loginOtpBackgroundImg.jpg') }}" selected>Select background</option>
                    <option value="{{ asset('logos/menuBackGround.jpg') }}">Img 1</option>
                    <option value="{{ asset('logos/menuBackGround1.jpg') }}">Img 2</option>
                    <option value="{{ asset('logos/menuBackGround2.jpg') }}">Img 3</option>
                    <option value="{{ asset('logos/menuBackGround3.jpg') }}">Img 4</option>
                    <option value="{{ asset('logos/menuBackGround4.jpg') }}">Img 5</option>
                    <option value="{{ asset('logos/menuBackGround5.jpg') }}">Img 6</option>
                </select>
                @include('govt_menu.upload_background')     
            </div>

govt_menu.upload_background 的文件代码

<form id="uploadForm" enctype="multipart/form-data">
    @csrf
    <label class="uploadBackground pl-3 mb-0" for="image_upload">Upload background <em style="text-transform: lowercase"><small>(.jpg format)</small></em>:</label>
    <input class="uploadBackground pl-3" id="image_upload" name="image" type="file" accept="image/jpg" />
    <button type="submit" onclick="uploadImage()">Upload</button>
</form>         

<script>
    $(document).ready(function() {
    $('#uploadForm').on('submit', function(e) {
        e.preventDefault(); 
        var formData = new FormData(this);
        console.log("formData", formData);

        $.ajax({
            url: '{{ route("upload_background") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                console.log(response);
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });
});
</script>

我的路线代码如下：

#Menu Dashboard - Background Image Setting
Route::post('/set-default-background-image', '\App\Http\Controllers\League\HomeController@setDefaultBackgroundImage')->name('setDefaultBackgroundImage');


Route::middleware(['auth'])->group(function () {
    Route::post('/govt_menu/upload-background-image', '\App\Http\Controllers\League\HomeController@uploadBackgroundImage')->name('upload_background');
});

附上错误截图。我尝试了多种方法，但没有一种有效。接下来我可以尝试什么？

Answer 1

您可以分享您的路线文件（web.php）吗