Vue.jsで画像データをPOSTしたかったのでformDataを使って実現しました
【画面側】
type="file" の入力欄と送信ボタンを用意
画像の選択(input)が行われたとき、送信ボタンが押されたときにそれぞれ処理を行う
<template>
<input @change="fileSelect" type="file" name="file">
<button @click="upload" type="submit">送信</button>
</template>
【js側】
この場合はTestViewという名前でコンポーネントを作っています。
<script>
export default {
name: "TestView",
data: function () {
return {
selected_file: null
}
},
methods: {
//ファイル選択時の処理
fileSelect: function(e) {
//選択したファイルの情報を取得しプロパティにいれる
this.selected_file = e.target.files[0];
},
//送信処理
upload: function() {
//formDataをnewする
let formData = new FormData();
//appendでデータを追加(第一引数は任意のキー)
//他に送信したいデータがある場合にはその分appendする
formData.append('file', this.selected_file);
let config = {
headers: {
'content-type': 'multipart/form-data'
}
};
axios.post('/product', formData, config)
.then(function(response) {
console.log('成功')
})
.catch(function(error) {
console.log('失敗')
})
}
}
}
</script>
【Laravel コントローラ側】
サーバ側でのデータの受け取り方
public function test(Request $request)
{
//js側で設定したキーを指定
$file = $request->file('file');
}