Vue
Vuetifyのv-file-inputで画像を送信する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
Vuetify の v-file-input で画像を送信する方法についてまとめました。
結論
v-file-input は、とてつもなく便利で、通常の input タグより記述を簡略化することができます。
ですので、通常の input の書き方になりませんので、そこだけ注意したらいけると思います。
v-model を指定する
<v-file-input
v-model="image"
></v-file-input>
<script>
export default {
data(){
return {
image: []
}
}
}
</script>
送信する
<script>
export default {
data() {
return {
image: [],
}
},
methods: {
post() {
//画像はFormDataで送る
var formData = new FormData()
formData.append("image", this.image)
//ContentTypeを変える
const config = {
header: {
"Content-Type": "multipart/form-data",
},
}
//axiosで送信する
axios
.post("post", formData, config)
.then(response => {})
.catch(error => {})
},
},
}
</script>
解説
v-input-file を使えば、@change でインプットされた画像を取得してデータに入れる過程をすることなく、v-model で簡単にファイルのデータを引っ張ってくることが可能です。
通常の input タグだと、readonly なので、できない
<input v-model="test" type="file" />
このように書くとエラーになります。
Errors compiling template:
<input v-model="test" type="file">:
File inputs are read only. Use a v-on:change listener instead.
読み取り専用のため、@change を使ってくださいと書かれています。
通常の input でやる場合
<input @change="imageInput" type="file" />
data(){
return {
image: ''
}
},
methods: {
imageInput(e){
this.image = e.target.files[0]
}
}
こうなります。
複数の画像を送信したい
multiple を指定する
<v-file-input v-model="image" multiple></v-file-input>
これで複数の画像を選択できるよう になります。
//画像の数を送る
let num = this.image.length
formData.append("number", num)
//画像の数だけappendする
for (let i = 0; i < num; i++) {
var name = "image" + i
formData.append(name, this.image[i])
}
この情報をもとに、サーバーで画像の数だけ保存する処理をすればいいんじゃないかなと思いますが、どうでしょうか?
まとめ
以上です。
v-file-input で画像を送信する方法についてやってみました。
最後の複数送信の記述は、どうしたら良いのか正直ベストな方法が分かりませんが、参考になればと思います。
Laravel + Vue + S3 で画像の保存をする方法
苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。
それでは!
フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。