Laravel
VueとLaravelとS3の環境で画像の保存をする方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
Vue と Laravel の環境で S3 に画像を保存する方法についてまとめました。
AWS のコンソールには入れる前提で進めていきます。
S3 とは
シンプル・ストレージ・サービスです。
AWS のストレージサービスのことです。
ファイルを保存するのに特化したもので、基本的にファイルはここに放り込んで おけば良いという認識です。
環境
Laravel 6
Vue 2
コマンド
Laravel 側のコマンドです。
composer require league/flysystem-aws-s3-v3 "~1.0"
このコマンドでパッケージが入ります。
パッケージの依存関係でエラーが出たら、
composer update
しましょう。
⇨composer require コマンドでバージョンが全然うまくいかない時の対処法
Vue 側の表示を作る
<template>
<div>
// 画像が入ったら関数が発動して、imageに画像データが入る
<input
type="file"
accept="image/jpeg, image/png"
@change="onChangeImage"
/>
<button @click="postImage">送信</button>
</div>
</template>
<script>
export default {
data() {
return {
image: {}
};
},
methods: {
//画像データが入る
onChangeImage: function(e) {
this.image = e.target.files[0];
},
//Laravelにpostする
postImage: function() {
// 画像を送信する旨のheaders情報
const config = {
header: {
"Content-Type": "multipart/form-data"
}
};
//画像を送信する時は、FormDataを使う。
var formData = new FormData();
//appendの第一引数がkey、第二引数がデータ
formData.append("image", this.image);
//textとか他の項目を入れたいとき
// formData.append("text", this.text);
axios.post("/post/s3/image", formData, config).then(res => {
console.log(res);
});
}
}
};
</script>
画像を送信する最低限の記述をしました。
他にテキストなどを送信した時は、同じように append してあげれば良いです。
AWS の設定をする
①S3 の作成
管理画面に入って、S3 を選びます。
「バケットを作成」
⇨ バケット名「laravel-test-s3」
⇨ リージョン「東京リージョン」
他は初期値のまま、バケットを作成を押す。
②IAM の作成
「ユーザーを追加」