ImagePreviewForm.vue

<template lang="pug">
.image-preview-form
  img.image(:src="previewImageUrl")
  label.inputwrap(for="input")
    span.button(v-text="buttonText")
    input#input.input(type="file" @change="imageInputChange")
</template>

<script lang="coffee">
URL = window.URL || window.webkitURL

export default
  props:
    remoteImageUrl:
      type: String
      require: false
      default: null
    placeholder:
      type: String
      require: false
      default: "画像を入力"
  data: ->
    imageImput: null
    image: null
  computed:
    imagePath: ->
      URL.createObjectURL(@image) if @imageImput?
    previewImageUrl: ->
      if @imagePath?
        @imagePath
      else if @remoteImageUrl?
        @remoteImageUrl
    buttonText: ->
      if @image?
        @image.name
      else
        @placeholder
  methods:
    imageInputChange: (e) ->
      @imageImput = e.target
      @image = e.target.files[0]
      @$dispatch('image-imput', @image)
    clearImage: ->
      @imageImput.value = null
      @image = null
      @$dispatch('image-clear', @image)
</script>

<style lang="scss" scoped>
.image-preview-form {
  > .image {
    width: 100%;
    margin-bottom: $small-spacing;
  }
  > .inputwrap {
    > .button { @include button($bg-color:$info-color) }
    > .input { display: none; }
  }

  > .clearbutton {
    @include button($bg-color:$warn-color)
  }
}
</style>