移动友好的图片文件输入组件的Vue.js
移动友好的图片文件输入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>
