移动友好的图片文件输入组件的Vue.js

移动友好的图片文件输入组件的Vue.js
插件名称 vue-picture-input
发布时间 2020年7月28日
插件作者 alessiomaffeis

移动友好的图片文件输入Vue.js组件与图像预览,拖放,EXIF方向,和更多。

下载安装:

npm install --save vue-picture-input

使用:

<template>
  <div class="hello">    
    <picture-input 
      ref="pictureInput"
      width="600" 
      height="600" 
      margin="16" 
      accept="image/jpeg,image/png" 
      size="10" 
      button-class="btn"
      :custom-strings="{
        upload: '<h1>Bummer!</h1>',
        drag: 'Drag a ? GIF or GTFO'
      }"
      @change="onChange">
    </picture-input>
  </div>
</template>
<script>
import PictureInput from 'vue-picture-input'

export default {
  name: 'app',
  data () {
    return {
    }
  },
  components: {
    PictureInput
  },
  methods: {
    onChange (image) {
      console.log('New picture selected!')
      if (image) {
        console.log('Picture loaded.')
        this.image = image
      } else {
        console.log('FileReader API not supported: use the <form>, Luke!')
      }
    }
  }
}
</script>

您还可以通过unpkg的CDN(或jsDelivr)在浏览器中直接使用它:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-picture-input"></script>
  <title>In the browser!</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <picture-input></picture-input>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      components: {
        'picture-input': PictureInput
      }
    })
  </script>
</body>
</html>