<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の適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。