Laravel 8 - CRUD(9)

사진 업로드

글을 작성할 때, 사진 업로드를 해보겠습니다.

 

resources/views/layouts/create.blade.php 파일을 수정해줍니다.

@extends('layouts.app')

@section('section')
    <section class="w-2/3 mx-auto">
        <div class="w-full text-2xl text-green-500 mt-8">글쓰기</div>
        <form action="/boards" method="post" class="mt-8 w-full" enctype="multipart/form-data">
            @csrf
            <p>
                <label for="title" class="text-xl">제목 : </label>
                <input type="text" id="title" name="title"
                       class="outline-none border border-blue-400 w-1/2 pl-1 py-1 rounded-lg">
            </p>
            <p class="mt-4">
                <label for="story" class="text-xl">내용</label>
                <textarea id="story" name="story"
                          class="outline-none border border-blue-400 w-full h-64 mt-2 rounded-lg resize-none"></textarea>
            </p>

            <p class="mt-2">
                <label for="picture"></label>
                <input type="file" id="picture" name="picture">
            </p>

            <p class="mt-8">
                <input type="submit" value="작성"
                       class="px-4 py-1 bg-green-500 hover:bg-green-700 text-lg text-white">
                <input type="button" value="취소" onclick="history.back()"
                       class="px-4 py-1 ml-6 bg-red-500 hover:bg-red-700 text-lg text-white">
            </p>
        </form>
    </section>
@stop

 

파일 업로드를 추가합니다.

그리고 database/migrations/create_boards_table.php 파일을 수정합니다.

public function up()
    {
        Schema::create('boards', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('user_id');
            $table->string('user_name');
            $table->string('title');
            $table->longText('story');
            $table->string('image_name') -> nullable();
            $table->string('image_path') -> nullable();
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users');
        });
    }

 

image_name, image_path를 추가해주었고 nullable로 해서 꼭 사진을 넣지 않아도 되게했습니다.

다시 php artisan migrate:refresh를 해줍니다.

 

BoardController.php로 가서 store 메소드를 수정해줍니다.

public function store(Request $request){
        $validation = $request -> validate([
            'picture' => 'image|mimes:jpeg,png,jpg,gif,svg',
            'title' => 'required',
            'story' => 'required'
        ]);
        $board = new Board();
        $board -> user_id = auth() -> user() -> id;
        $board -> user_name = auth() -> user() -> name;
        $board -> title = $validation['title'];
        $board -> story = $validation['story'];

        if($request -> hasFile('picture')){
            $fileName = time().'_'.$request -> file('picture') -> getClientOriginalName();
            $path = $request -> file('picture') -> storeAs('public/images', $fileName);
            $board -> image_name = $fileName;
            $board -> image_path = $path;
        }
        $board -> save();

        return redirect('boards/'.$board -> id);
    }

 

사진이 있을 경우에만 사진 이름을 현재 시간 + 원래 파일이름으로 해주고

사진을 stoage/app/public/images 폴더에 저장합니다.

 

app/Models/Board.php로 가서 fillable에 추가해줍니다.

class Board extends Model
{
    use HasFactory;
    protected $fillable = ['title', 'story', 'user_id', 'user_name', 'image_name', 'image_path'];
}

 

위 사진 처럼 먼저 php artisan storage:link를 해줍니다.

그럼 public 폴더안에 storage/images 폴더가 만들어지고 글을 작성하면

storage/app/public/images에도 저장이 되고

public/storage/images에도 저장이 됩니다.

 

storage:link

php artisan storage:link가 제대로 작동했으면 위 사진과 같이 나올겁니다.

만약 에러가 뜨면 public 폴더 안에 있는 storage 폴더를 지우고 다시 시도해보세요.

참고로 filesystem.php 파일을 config 폴더 안에 있습니다.

 

이제 글을 작성해서 사진이 제대로 저장되는지 확인 해보면됩니다.

사진 저장

 

사진 저장

사진이 있을 때와 없을 때, 제대로 저장 됩니다.

주의 하실 점이 업로드 하는 사진 사이즈가 너무 크면 사진이 업로드 되지 않습니다.

 

이제 resources/views/boards/show.blade.php로 가서 업로드한 사진이 글에 보이게 수정해줍니다.

@extends('layouts.app')

@section('section')
    <section class="w-2/3 mx-auto mt-16">
        <div class="border-b border-gray-300 mb-8 pl-1 pb-2 text-xl font-bold">
            {{$board -> title}}
        </div>
        <div class="text-lg">
            {{$board -> story}}
            <img src="{{asset('images/'.$board->image_name)}}" alt="1" style="width: 100%; height: 100%">
        </div>
        <div class="mt-8">
            <a href="{{route('boards.edit', $board -> id)}}">
                <button class="px-4 py-1 text-white text-lg bg-blue-500 hover:bg-blue-700">수정</button>
            </a>
            <form action="/boards/{{$board -> id}}" method="post" class="inline-block">
                @csrf
                @method('DELETE')
                <button class="px-4 py-1 text-white text-lg bg-red-500 hover:bg-red-700">삭제</button>
            </form>
        </div>
    </section>
@stop

 

그리고 게시글을 클릭하면 사진이 나오는 것을 확인 할 수있습니다.

 

사진 첨부

사진 사이즈를 큰 걸로했습니다 ㅎ..