Vue.js ファイルアップロード前のイメージプレビュー

フォーム選択した画像をブラウザ上にプレビュー表示する。

アップロードフォーム

<form enctype="multipart/form-data">
  <div>
    <input
      @change="changeFile"
      type="file"
      name="upfile[]"
      multiple
      accept="image/*" />
    <img v-for="(img, idx) in uploadedImage" :key="idx" :src="img.src" />
  </div>
</form>

のようなマークアップを記述する。

accept="image/*"を指定しておくとスマートフォンでカメラ撮影での画像指定が可能になる。残念ながらPC付属のカメラは起動できない。

PC付属のカメラをブラウザから起動させるにはJSからnavigator.mediaDevicesへのアクセスが必要になる。

フォームに選択された画像データを受け取る

あとはchangeイベントで選択された画像を受け取り、imgタグに渡せばよい。

data: function () {
  return {
    uploadedImage: []
  }
},
methods: {
  changeFile (elem) {
    this.uploadedImage = []
    const files = elem.target.files || elem.dataTransfer.files
    for (var i = 0; i < files.length; i++) {
      let file = files[i]
      let url = URL.createObjectURL(file)
      this.uploadedImage.push({ src: url })
    }
  }
}

リンク