Laravel 게시판에 이미지 투고 기능이 추가되었습니다!

paiza에서 배웠어요Laravel 입문 강좌 제작된 게시판에 이미지 투고 기능을 추가해 보세요.

이미지 투고의 구조


1. 새 투고 페이지에서 파일 선택 및 투고 이미지
2.store 방법을 통해public 폴더에 이미지를 저장합니다.데이터베이스에 파일 경로 저장
3. 파일 경로를 읽고 이미지 표시

1. 새로운 발언 기능 추가


새 게시물 보기에 파일 업로드 필드 추가
new.blade.php
<h1>MYPICTURE</h1>
<p>{{$message}}</p>
{{Form::open(['route'=>'picture.store','files'=>true])}}
<div class="form-group">
    <!--投稿した画像のユーザーネームをDBに格納させる-->
    {{Form::label('user_name','Name:')}}
    {{Form::text('user_name',null)}}
</div>
<div class='form-group'>
    <!--投稿したコメントをDBに格納するビュー-->
    {{Form::label('content','Content:')}}
    {{Form::text('content',null)}}
</div>
<div class='form-group'>
    <!--ファイルを読み込む-->
    {{Form::file('thefile')}}
</div>
<div class="form-group">
    {{Form::submit('作成する',['class'=>'btn btn-primary'])}}
    <a href='{{ route("picture.list")}}'>一覧に戻る</a>
</div>
{{Form::close()}}

Form:::open 방법의 "files'=>true"는 업로드 파일을 지정합니다.
"{Form::file ("thefile")}"에서 아래와 같은 파일 업로드 폼을 만듭니다.

기호 링크


보기에서 파일이 업로드되는 처리를 설명했습니다. 다음은 컨트롤러입니다...앞에 기호 링크를 붙여라.
기호 링크란 특정 파일이나 디렉토리를 가리키는 다른 파일을 생성하는 것으로, 이 파일을 통해 바디의 구조를 탐색하고 폴더에서 다른 폴더로 탐색할 수 있는 링크를 생성할 수 있습니다.
Laravel은 이 기능을 갖추고 있으며, 파일 업로드는 이 메커니즘을 이용한다.
디렉토리를 항목 바로 아래로 이동하고 다음 명령을 터미널에 입력합니다.
$ php artisan storage:link
이렇게 하면public의 바로 아래에 다음 폴더가 형성됩니다.

현재,public를 통해storage 폴더에 접근할 수 있습니다!

2.store 방법


업로드된 이미지를 폴더에 추가하고, 이미지의 파일 이름을 데이터베이스에 각각 저장하는 방법을store 방법에 추가합니다.
PictureController.저장 방법
    public function store(Request $request)
    {
        $picture=new picture();
        //投稿した画像とコメントをDBに格納させる
        $picture->user_name=$request->user_name;
        $picture->content=$request->content;
        $filename=$request->file('thefile')->store('public');       //storageフォルダに投稿した画像を保存しファイルパスを格納
        $picture->image=str_replace('public/','',$filename);        //ファイル名から「public/」を取り除く
        $picture->save();
         //tinkerコマンドと同じ
        return redirect()->route('picture.show',['id'=>$picture->id]);
    }
업로드된 이미지 파일은store ("") 함수로 무작위로 명명되어 지정한 디렉터리에 저장됩니다.(이 경우public 이하의 폴더로 지정)
이 때, 기본값은 "Storage/app/"에 저장됩니다. 파일 이름에 "public/"가 있기 때문에 파일 이름에서 이 파일 이름을 제거하기 위해 $filename에 파일 이름을 잠시 저장하고str_replace 함수에public/를 지정하여 삭제합니다.
그리고 파일 이름을 투고자 이름과 평론과 함께 데이터베이스에 저장한다.

3. 파일 경로를 읽고 이미지 표시


show 메서드와 뷰 설명은 다음과 같습니다.

반올림 방법


PictureController.php(show 방법)
    public function show(Request $request,$id,Picture $picture)
    {
        $message='This is your picture.'.$id;
        $picture=Picture::find($id);
        Storage::disk('local')->exists('public/storage/'.$picture->image);
         //$idに格納された番号と一致したデータを引っ張り出す。
        return view('show',['message'=>$message,'picture'=>$picture]);
    }
이번에는 로컬 환경에서 만들어진 이 프로그램이기 때문에 투고한 이미지는 로컬 디스크에 저장됩니다.
따라서'저장::disk('로컬')'에서 로컬 디스크를 읽고'exists'에서 첫 번째 인자'public/storage/'를 지정하고 두 번째 인자로 데이터베이스 이미지 열에 저장된 파일 이름을 지정합니다.

보기


세부 페이지 보기에 다음 설명을 추가합니다.
<p><img src="{{ asset('/storage/'.$picture->image)}}"></p>
이렇게 하면 파일 이름에 따라storage 폴더 바로 아래에 저장된 이미지 파일을 표시할 수 있습니다!

완성형


이상에 따라 제작된 이미지 투고 기능은 실제로 이런 느낌이다.

새 투고 화면



세부 정보 페이지



도전하다


이번에는 "이미지를 투고하여 표시합니다."의 규격화 거리의 멱 함수.

저장할 폴더 정보


이번에는'storage/app/public'정아래에 그림을 저장했습니다. 그러면 공개 응용 프로그램에서 바깥에서 그림을 볼 수 있는 폴더입니다.
로컬 환경에서는 괜찮을 수도 있지만 공개되면 보안상 매우 위험한 상태이기 때문에 투고 이미지의 폴더가 밖에서 보이지 않아야 한다.

파일 업로드 정보


분명히 이미지 업로드라고 했는데 실제로는 파일 업로드 기능으로 이루어져 있다.
이렇게 되면 이미지뿐만 아니라 텍스트든 뭐든'파일'이런 형식의 물건이라면 기본적으로 무엇이든 업로드할 수 있다.
"이미지 파일만"으로 설정하려면 "검증"이라는 파일 종류의 처리를 지정해야 합니다.
상기 두 가지는 앞으로 과제로 열거한 기능을 추가하고 싶습니다.

총결산


이번에는 Laravel 게시판에 이미지 투고 기능을 추가해 보았습니다.
솔직히 말하면 게시판에 사진을 투고하는 게 좋겠지?해보긴 했지만 막상 해보면 어려워서 시간이 많이 걸렸어요...
도중에 저는 테라테일로 질문을 했습니다. 이 기회를 빌려 답변과 건의를 해주신 여러분께 감사를 드립니다.

참고 문헌


[Laravel] 사용자 아이콘 이미지를 투고하고 표시하는 기능을 실현하기 때문에 필기(이미지의 저장 장소는? 기호 링크?)
404 오류로 저장된 이미지가 표시되지 않음
Laravel 기호 링크에 좀 빠져있으면...
IT 용어 사전 기호 링크
LaravelRecipes 파일 업로드 필드 만들기
Laravel에서 이미지를 업로드하는 방법

좋은 웹페이지 즐겨찾기