Laravel + Reactで画像をs3にアップロードする
どうも、くずきです。
今回使用するバージョン
ライブラリ | バージョン |
---|---|
react | 15.6.1 |
Laravel | 5.5.19 |
league/flysystem-aws-s3-v3 | 1.0.18 |
React
周りはcreate-react-app
のバージョン1.4.0
を使って作成している。
Laravelでs3にアップロードする準備
Laravel
のfilesytem
機能をleague/flysystem-aws-s3-v3
を使って簡単に拡張できる。
公式の説明がわかりやすくて、そちらを参考にした方が良いです。
コードだけのせておく
// ControllerでAPIの準備しておく public function upload(Request $request) { $item_image_path = ""; if ($request->hasFile('item_image_file')) { $item_image_path = $request->item_image_file->store('images/item', 's3'); } return response()->json(["href" =>"//".env('CDN_DOMAIN')."/" . $item_image_path]); }
Reactでファイルをアップロードする
自分はここで少しはまった。
Javascript
ではアップロード時に取得したファイルデータをそのままアップロードしても、multipart/form-data
扱いにならない。
そこで、FormData
モジュールを使って変換してあげる必要がある。
受け取ったデータ(target
のfiles
の中)をFormData
のappend
関数にいれてあげるだけでよい。
const formData = new FormData(); formData.append('item_image_file', e.target.files[0]); UploadAction.uploadItemImage(formData); uploadStore.on("item_image", (v) => { this.props.onChange(v.href); });
今回はアップロード後にURL
が返ってくるので、それを表示している。
終わりに
わかってしまえば簡単だった。