2018.1.31
カクテルデータベース制作日誌#7【画像アップロード】
ということで、当DBの目玉機能の一つでもあるものの、ちょっと苦労した画像アップロードに関してです。
画像のアップロード自体は以前から何度かやっていて、Anonymousでも、Livvonでも実装しましたが、今回はLaravel5系から導入されたらしい、標準機能の
ファイルストレージを使ってみたいと思います。
こいつを使うメリットとしては、容易に外部クラウドストレージに切り替えることができる仕組みがあるというところですかね。標準機能としてあるならばそれを使っちゃいましょう。
ただ、結構ハマって半日溶かしたのでメモ書きを残します。
まず、画像のアップロードに関してはめちゃくちゃ簡単にできることがわかりました。
//画像関係
if($request->hasFile('cocktail_image')){
$path = $request->cocktail_image->store('images','public');//"images/～～.jpeg"
$this->image = str_replace("images/", "", $path);//ファイル名だけ抜き出す
}
こんな感じになります。hasFileで、リクエストにファイルがあるか確認して、あれば
store()で保存できるみたいです。ファイル名は勝手につけてくれます。一意のものに自動的にしてくれるみたいなので割と便利ですね。
ここで、第二引数にpublicを指定するのがミソのようですね。デフォルトだとlocalになるんですが、これは非公開ファイル置き場を指している模様です。
最後にファイル名の部分だけ抜き出してるんですが、別にこれフォルダも入れちゃっても良かったかも知れません。後のことを考えると正直ね。
特にサイズ変更とかするわけじゃなければ、これだけで保存できちゃいます。ここまでは簡単ですね。
この取得した名前をDBに格納すれば準備はできましたので、次はファイルを読み込みます。
で、標準機能ってぐらいですからこれも簡単にできるようになっています。
use Illuminate\Support\Facades\Storage;
function file_get(string $path){
return Storage::disk('public')->url($path);
}
<img class="image" src="{{file_get("images/".$cocktail->get("image"))}}">
雑に抜き出してきましたが、コードとしてはこれだけです。
publicディスクからurlを引っ張って表示するのみです。結局先程削除した"images/"を付け足してるので、この部分を含んでDBに格納した方が良かったかなぁと正直思っています。まぁ次からはそうしよう(笑)
でも、これだけじゃ動かないんですよね。まぁ細かい説明は省きますけど
シンボリックリンクを張る必要があります。
やりたいこととしては、storageフォルダに実体があるわけですが、公開可能フォルダはpublic以下なので、あたかもpublicフォルダ下にstorage/publicがあるように見せかけたいみたいなそういう仕組みです。
これを張る方法も
公式ドキュメントに書いてあります。たった一行のコマンドを打つだけです。簡単ですね。
ただ、これ
本番環境にどうやって適用するんだ？と。
なんかのファイルが書き換わってるのかなぁと思って全部アップロードし直したんですが、改善されないので、このコマンドをサーバー側で叩かなくてはいけないのではと思いましてね。
でもどうやってやるんだろう、普通のレンタルサーバーで出来るんすかねこーいうの？？？とか思ってたわけですが、調べてみると
SSHアクセスというのができるらしく、こいつでコマンドを叩けばいけました。
僕はmixhostを使ってるんですが、ヘルプのページもかなり分かりやすくてよかったです。
ログインして、cdでLaravelのフォルダまで移動すればphp artisanが使えるので、コピペしてエンター押せば完了します。内部で何が起きてるかは分かりませんが、これで画像表示も上手くいきました。
これを書いてるのは1月30日のことなのですが、この時点で
「Ver0.1でやろうと思っていたこと」全てを実装し終えたので、ようやっとデザイン方面に着手できます。
が、暫くオケ関連の方で余裕がないので、デザインを考えつつちょっと休憩したいところですね。笑
まだちょっと書き置きしてるものがあるので、2月入ってからもカクテルDBの話が続きますけど、ご容赦ください(笑)
以下今日のおまけ。