首页 > 解决方案 > Laravel Nova Image Collection 上传“图像集合必须是图像”

问题描述

我继承了一个带有 Laravel 后端的 Expo 应用程序,但我无法在 Nova 管理面板上上传图像。每当我尝试上传照片时,都会收到一条错误消息,提示“图像集合必须是图像”。从代码中,我可以看出图像集合的名称是“image-collection”,但我不确定为什么 Nova 认为图像集合不是图像。我可以通过应用程序上传照片,所以看起来应该是 Nova 的问题。这是我收到的错误的屏幕截图: Laravel Nova Image Upload error

这是我们用来将图像存储在数据库中的图像模型

<?php

namespace App;

use App\Traits\Searchable;
use Cviebrock\EloquentSluggable\Sluggable;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Storage;

use Spatie\MediaLibrary\HasMedia\HasMedia;
use Spatie\MediaLibrary\HasMedia\HasMediaTrait;
use Spatie\MediaLibrary\Models\Media;

/**
 * App\Image
 *
 * @property int $id
 * @property int $restaurant_id
 * @property string|null $image_path
 * @property string|null $caption
 * @property string $slug
 * @property bool $active
 * @property \Illuminate\Support\Carbon|null $created_at
 * @property \Illuminate\Support\Carbon|null $updated_at
 * @property-read mixed $slug_title
 * @property-read \Illuminate\Database\Eloquent\Collection|\Spatie\MediaLibrary\Models\Media[] $media
 * @property-read \App\Restaurant $restaurant
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image findSimilarSlugs($attribute, $config, $slug)
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image newModelQuery()
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image newQuery()
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image query()
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image whereActive($value)
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image whereCaption($value)
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image whereCreatedAt($value)
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image whereId($value)
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image whereImagePath($value)
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image whereRestaurantId($value)
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image whereSlug($value)
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image whereUpdatedAt($value)
 * @mixin \Eloquent
 * @method static \Illuminate\Database\Eloquent\Builder|\App\Image searchBy($value)
 */
class Image extends Model implements HasMedia
{
    use Sluggable;
    use HasMediaTrait;
    use Searchable;

    public function sluggable()
    {
        return [
            'slug' => [
                'source' => 'slug_title',
                'unique' => true,
            ]
        ];
    }

    protected $fillable = [
        'caption', 'active', 'review_id'
    ];

    protected $searchable = [
        'id', 'caption',
    ];

    protected $casts = [
        'active' => 'boolean'
    ];

    public function getSlugTitleAttribute()
    {
        return Str::random(12);
    }

    public function restaurant()
    {
        return $this->belongsTo(Restaurant::class);
    }

    public function registerMediaConversions(Media $media = null)
    {
        $this->addMediaConversion('thumb')
//            ->width(130)
            ->height(300)
            ->withResponsiveImages();
    }

    public function registerMediaCollections()
    {
        $this->addMediaCollection('main-image')->singleFile();
        $this->addMediaCollection('image-collection');
    }
}

这是对应的 Nova 面板:


namespace App\Nova;

use Laravel\Nova\Fields\BelongsTo;
use Laravel\Nova\Fields\ID;
use Illuminate\Http\Request;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\Boolean;
use Laravel\Nova\Fields\Markdown;
use Laravel\Nova\Http\Requests\NovaRequest;
use Ebess\AdvancedNovaMediaLibrary\Fields\Images;

class Image extends Resource
{
    /**
     * The model the resource corresponds to.
     *
     * @var string
     */
    public static $model = 'App\Image';

    /**
     * The single value that should be used to represent the resource when being displayed.
     *
     * @var string
     */
    public static $title = 'caption';

    /**
     * The columns that should be searched.
     *
     * @var array
     */
    public static $search = [
        'caption'
    ];

    /**
     * Get the fields displayed by the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function fields(Request $request)
    {
        return [

            BelongsTo::make('Restaurant Name', 'restaurant', 'App\Nova\Restaurant')->creationRules('required')->sortable(),
            Text::make('Caption')->rules('required', 'max:84')->sortable(),

            // allow batch image upload
            Images::make('Image Collection', 'image-collection') // second parameter is the media collection name
                //->withResponsiveImages()
                ->customPropertiesFields([
                    Boolean::make('Active'),
                    Markdown::make('Description'),
                ])
                ->setFileName(function($originalFilename, $extension, $model){
                    return md5($originalFilename) . '.' . $extension;
                })
                ->conversionOnPreview('thumb') // conversion used to display the "original" image
                ->conversionOnDetailView('thumb') // conversion used on the model's view
                ->conversionOnIndexView('thumb') // conversion used to display the image on the model's index page
                ->conversionOnForm('thumb') // conversion used to display the image on the model's form
                ->fullSize() // full size column
                //->rules('required') // validation rules for the collection of images
                // validation rules for the collection of images
                ->singleImageRules('dimensions:min_width=100'),

            Boolean::make('Active'),
        ];
    }

    /**
     * Get the cards available for the request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function cards(Request $request)
    {
        return [];
    }

    /**
     * Get the filters available for the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function filters(Request $request)
    {
        return [];
    }

    /**
     * Get the lenses available for the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function lenses(Request $request)
    {
        return [];
    }

    /**
     * Get the actions available for the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function actions(Request $request)
    {
        return [];
    }
}

对此的任何帮助将不胜感激,因为我是 Laravel 和 Laravel Nova 的初学者。

标签: phplaravellaravel-5laravel-4laravel-nova

解决方案


推荐阅读