皆さんこんにちは。
今回は、Laravelを使ったS3ファイルへの画像アップロードと
呼び出し方法を備忘録として書いていきます。
ググってもどれもエラーで
結局海外のサイトのQ＆Aサイトで部分部分を引っ張って
無事アップロード、呼び出しができたので書いていきます。
今回やろうとしたこと。
環境としては、
- Laravel5.7
- Vue.js
- MAMP
です。
やろうとしたことは、
Vueの単一ファイルコンポーネントのフォームから
「axios」を使用して、LaravelのコントローラーへPOSTして
そこでファイルの送受信をできるようにしたいと考えました。
発生したエラー
この処理は、簡単に行くと思いましたが、
様々なサイトを参考にしてもエラーが出てしまいました。
Call to a member function getRealPath() on string
Call to a member function hashName() on string
検索しても自分に当てはまるものがなく、
以下の方法で試した結果うまくいったので、
同じ状態の方はぜひ参考にしてください。
S3からファイルアップロードの処理と受信の処理
Vueの処理は今回省略します。
まず、S3とファイルの送受信をするファイルの上の方に
[php]
use Illuminate\Support\Facades\Storage;
[/php]
を入力します。
次に隠しファイルである「env」ファイルに
[php]
AWS_ACCESS_KEY_ID=XXX
AWS_SECRET_ACCESS_KEY=XXX
AWS_DEFAULT_REGION=XXX
AWS_BUCKET=XXX
AWS_URL=XXX
[/php]
S3の情報を入力します。
S3と送受信を行うファイル（今回はコントローラーにします）
へ入った後に
[php]$sample_data = $_POST[‘files’];
$img = $_POST[‘files’];
$img = str_replace(‘data:image/jpeg;base64,’, ”, $img);
$img = str_replace(‘ ‘, ‘+’, $img);
$fileData = base64_decode($img);[/php]
POSTしたデータはbase64形式だったのでデコード処理をしています。
（人によって違うかも）
送信の処理
[php]
Storage::disk(‘s3’)->put(‘public/指定する場合ファイル名.jpg’, $fileData);
[/php]
ちなみにこの書き方でpublicというディレクトリがない場合は自動で生成されます。
画像のファイル名を指定する場合は第一引数にファイル名を指定します。
第二引数は画像のファイルです。
↑このやり方のサンプルが全くありませんでした。
Storage::disk('s3')->putFile('XXX', $request->sample, 'public');
のような書き方でした。
これだとなぜかエラーが出てたんですよね。
第二引数がアカンみたいな情報は発見したのですが結局エラーは解除されませんでした。
受信の処理
S3にアップロードはできても、S3の画像を取得したいですよね。
今回のサンプルは、あまり調べずに作成したので、一般的ではないかもしれません。
[php]
$content = Storage::disk(‘s3’)->get(‘sample.jpg’);
return base64_encode($content);
[/php]
DBを使わずS3にアップロードされているファイル名を直接指定して
画像を取得しています。
上記の記事のように「$content」の中身を見た所
文字化けしていました。
今回はVue.jsのaxiosのレスポンスで受け取るために
base64にエンコードをして返しています。
これで無事表示ができました！
おわりに
Laravelはバージョンアップが早いので
現在のバージョンに合うものがないことがよくあります。
ブログの記事などを参考にするときは、
Laravelのバージョンや記事の作成・更新日付をチェックしてみましょう。
僕は○年前という記事は、軽く見て他の記事を参考にすることが多いです。
ちなみに今回のファイルの送受信以外の方法もあるので
自分がやりたい方でやってみてください。
コメント