在 Laravel 中为多张图片上传添加标题或描述

亚当

所以我正在尝试为一个项目上传图片,其中每个图片都可以有自己的描述或标题。我正在尝试通过项目创建表单来做到这一点。现在,一切正常,除了由于嵌套的 foreach 循环,我在 project_images 表中得到重复的条目,请看一下代码的总结结构,特别是 storProject 方法中的逻辑,如果有人可以提供帮助,我将永远感激. 谢谢你。

我正在使用 Laravel 和 Livewire。

楷模

项目模型

public function up()
{
    Schema::create('projects', function (Blueprint $table) {
        $table->id();
        $table->unsignedBigInteger('user_id');
        $table->foreign('user_id')->references('id')->on('users');
        $table->string('title');
        $table->integer('budget');
        $table->string('proposed_by');
        $table->string('executed_by');
        $table->string('status')->nullable();
        $table->integer('progress_indicator')->nullable();
        $table->date('starting_date');
        $table->date('completion_date')->nullable();
        $table->string('cover_image')->nullable();
        $table->mediumText('body')->nullable();
        $table->timestamps();
    });
}

Project_images 模型

 public function up()
{
    Schema::create('project_images', function (Blueprint $table) {
        $table->id();
        $table->string('images');
        $table->string('caption')->nullable();
        $table->UnsignedBigInteger('project_id');
        $table->foreign('project_id')->references('id')->on('projects')->onDelete('cascade');
        $table->timestamps();
    });
}

表格

<x-slot name="content">
        <x-errors />
        <div class="space-y-8 divide-y divide-gray-200  mt-10">

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


                    @if ($projectImages)
                        Images Preview:
                        <div class="flex flex-row m-8 ">

                            @foreach ($projectImages as $key => $projectImage)
                                <div class="flex flex-col gap-3">
                                    <img width="100%" src="{{ $projectImage->temporaryUrl() }}">
                                    <x-input placeholder="Caption"
                                        wire:model.defer="captions.{{ $key }}" />
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <label class="inline-block mb-2 text-gray-500">Upload
                    Projects Images</label>
                <div class="flex items-center justify-center w-full">
                    <label
                        class="flex flex-col w-full h-32 border-2 border-dashed hover:bg-gray-500 hover:border-gray-300">
                        <div class="flex flex-col items-center justify-center pt-7">
                            
                            <p class="pt-1 text-sm tracking-wider text-gray-400 group-hover:text-gray-600">
                                Select a photo</p>
                        </div>
                        <input wire:model="projectImages" type="file" multiple class="opacity-0" />
                    </label>
                </div>

                <x-textarea wire:model.lazy="body" label="Body" placeholder="write your article" />

            </form>

        </div>

    </x-slot>
    <x-slot name="footer">
        @if ($projectId)
            <div class="flex items-center gap-x-3 justify-end">
                <x-button wire:click="CancelConfirmation" label="Cancel" flat />
                <x-button type="submit" wire:click="updateProject" label="Update" wire:loading.attr="disabled"
                    primary />
            </div>
        @else
            <div class="flex items-center gap-x-3 justify-end">
                <x-button wire:click="CancelConfirmation" label="Cancel" flat />
                <x-button type="submit" wire:click="storeProject" label="Create" wire:loading.attr="disabled"
                    primary />
            </div>
        @endif

    </x-slot>

</x-jet-dialog-modal>

项目组件

public function storeProject()
{
    $this->validate([
        'title' => 'required',
        'status' => 'required',
        'budget' => 'required',
        'proposedBy' => 'required',
        'executedBy' => 'required',
        'startingDate' => 'required',
        'completionDate' => 'required',
        'progressIndicator' => 'required',
        'body'  => 'required',
        'image' => 'image|max:1024|nullable'
    ]);


    $image_name = $this->image->getClientOriginalName();
    $this->image->storeAs('public/photos', $image_name);
    $project = new Project();
    $project->user_id = auth()->user()->id;
    $project->title = $this->title;
    
    $project->status = $this->status;
    $project->budget = $this->budget;
    $project->proposed_by = $this->proposedBy;
    $project->executed_by = $this->executedBy;
    $project->starting_date = Carbon::create($this->startingDate);
    $project->completion_date = Carbon::create($this->completionDate);
    $project->progress_indicator = $this->progressIndicator;
    $project->body = $this->body;
    $project->cover_image = $image_name;
    $project->save();


    foreach ($this->projectImages as $projectImage) {

             $image_name = $projectImage->getClientOriginalName();

            $projectImage->storeAs('public/photos', $image_name);
            
            foreach ($this->captions as $caption) {

                $projectImages = new ProjectImages();
                $projectImages->project_id = $project->id;
                $projectImages->images = $image_name;
                $projectImages->caption = $caption;
            
               $projectImages->save();
            }


    }
    
    $this->notification()->success(
        $title = 'Success',
        $description = 'Project Created Successfully'
    );
    $this->reset();
}

因此,您可以直观地看到这里要执行的操作是表单的屏幕截图

项目表格是什么样子的

斯特凡诺·克里斯蒂安·维里亚纳

我假设您只希望每个项目图像都有一个标题。如果是这种情况,那么嵌套的 foreach 循环是不必要的,并且像这样将其更改为一个 foreach 应该可以解决问题。

foreach ($this->projectImages as $key => $value) {
        $image_name = $value->getClientOriginalName();
        $value->storeAs('public/photos', $image_name);
        $projectImages = new ProjectImages();
        $projectImages->project_id = $project->id;
        $projectImages->images = $image_name;
        $projectImages->caption = $this->captions[$key];
        $projectImages->save();
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章