くずきのblog

技術とか色々

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を使って作成している。

kzkohashi.hatenablog.com

Laravelでs3にアップロードする準備

Laravelfilesytem機能をleague/flysystem-aws-s3-v3を使って簡単に拡張できる。 公式の説明がわかりやすくて、そちらを参考にした方が良いです。

ファイルストレージ 5.5 Laravel

コードだけのせておく

// 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モジュールを使って変換してあげる必要がある。

developer.mozilla.org

受け取ったデータ(targetfilesの中)をFormDataappend関数にいれてあげるだけでよい。

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が返ってくるので、それを表示している。

終わりに

わかってしまえば簡単だった。