Laravel開発、画像アップロードと削除の実装
現在作成している本の情報を管理するアプリで、画像の処理を追加実装しました。
画像のアップロードについてはいろいろと詳細がまとめられていたサイトがありましたが、変更や削除については断片的に情報収集して作成しました。
といわけで、画像関連となります。
作ってる物
本情報の保存、まず最低限のデータだけで実装。
作成テーブル内カラム
id,picture,title,updated_at,created_at
タイトル名と写真を保存しています。
作成条件
写真は1枚のみ、写真なしも許容。
タイトルは必須。
やりたいこと
作成・画像・タイトル・登録日を保存。
削除・DBレコード削除と同時に画像も削除。
編集・タイトル・画像が変更できる。
やったこと
テーブル作成
まずデータを保存する為のテーブルを作成。
SQL文で一から作る方法もあるようですが、マイグレーションファイルを生成して、そこからカラム設定することで簡単にできるので、そちらを利用。
マイグレーションファイルはコマンド一つで出来ます。
$ php artisan make:migration create_book_table
ファイルが生成されるので、こちらにカラムと型、設定条件を追加。
今回、写真については必須ではなく、ない場合も許容する為、nullable()としてnullを許可しました。
そして、マイグレーションファイルを適用することで、テーブル完成。
マイグレーション実施コマンド
$ php artisan migrate
データベース操作前準備
ます第一段階としてPictureカラムに画像ファイル名としてテキストを記録できるようにしてデータレコードの新規作成・編集・削除をそれぞれ実装しました。
ここから本題、画像処理
新規追加機能
まず初めに新規作成時の処理を実装。
画像アップロードについては、こちらを参考にさせて頂きました。ありがとうございます。
画像アップロード機能をまずは実装して、更にレコード登録処理を追加。
画像ファイル形式も複数あるので、アップロードされた画像ファイルから拡張子を取得する方法としました。
画像ファイル名については、初めは登録レコード名にすることを考えましたが、保存しなことにはid名がうまくとれなかったので、ランダムな名前を設定することとし、str_randomとして設定しました。
ランダム名付与については、こちらを参考にさせて頂きました。ありがとうございます。
データレコード保存については、画像表示を行う時に画像名が必要となるので、$form['picture']にファイル名を再設定することとしました。
保存完了後はトップページにリダイレクトします。
削除機能
初めに削除機能を実装した時はデータレコードさえ消えれば問題ありませんでした。
しかし、今回は画像を扱っているため、画像ファイルの削除処理が必要です。これがないと、どんどん画像ファイルだけが蓄積されます。
画像削除についてWebで調べてみたのですが、画像削除として扱っているサイトがうまく見つけられませんでした。
そんな中、ファイル削除としていろいろ調べてみました。
ファイル削除については、こちらを参考にさせて頂きました。ありがとうございます。
こちらを元に削除コードを記述してみました。
最初に書いたコードでは画像が消えませんでした、コードはこちら。
削除idを元に画像を\File::delete〜によって実施後、レコード削除を実施させる方法で考えてみました。レコード削除は元々できていたのですが、画像が消えません。
試行錯誤した結果、\File::delete〜で指定しているカレントディレクトリがそもそも分かっていない事もあって、パスを見直すことにしました。
パス設定については、こちらを参考にさせて頂きました。ありがとうございます。
こちらを元に、画像がある場所のパスを指定してやることで、画像ファイルの削除ができました。
削除ディレクトリが合っていないとそりゃ消えませんよ…。
編集機能
画像の追加削除が完了したので、編集機能も併せてつけることにしました。
こちらはまず、今回作成したイメージから。
まず最低限の機能が目標ですので、デザインは適当ですが…。
画像アップロードや削除、タイトルの編集をすることでリアルタイムに画面に反映させて表示を確認した上で更新するという手順を考えました。
Javascript,JQueryを利用してリアルタイム更新を実現させることにしました。
JQuery導入については、こちらを参考にさせて頂きました。ありがとうございます。
導入方法もいろいろあるようですが、まず動く物作成を優先してますので、GoogleAPIのリンクを貼り付けました。
画像アップロード時のファイルイメージについては、こちらを参考にさせて頂きました。ありがとうございます。
JQueryコードはこちらです。
こちらでタイトル名と画像の変更が加わった際にWeb画面上にリアルタイムで変化させるようにしました。
データベースにはsendボタンを押すことで初めて反映されます。
JQueryによる見た目の編集が終わったら、あとはLaravelのデータ更新作業です。
そして作成したコードがこちら。
※実は本ブログ作成中に誤りを発見して修正しました…。
画像アップロード時と画像削除時は$form['picture']に値が入っている為、処理を実施。
処理がある場合はまず画像を削除。削除のみの場合は、Pictureカラムをnullへ変更。
画像を新たに追加した時は追加の処理が実施される形としました。
アップロードなしの場合は変更がないので、画像処理がされない様にしました。
画像処理完了後にあとはデータレコードを更新して完了。
これでようやく、追加・変更・削除の処理の完了です。
実際には、上記内容のプルリクエストを細分化して作業しました。こちらでコードが確認できます。
以上、画像アップロード及び削除についてでした。
