1.1.0 • Published 3 years ago
h5-vue-croppers v1.1.0
组件内使用
npm install h5-vue-croppers
import Avator from 'h5-vue-croppers'
components: {
Avator,
}
使用示例
<template>
<div>
<input
type="file"
@change="avatorChange"
>
<Avator
v-if="state"
:url="imageUrl"
:name="fileName"
:autoCrop="true"
:centerBox="true"
@cancel="cancelAvatorChoose"
@upload="getCropData"
/>
</div>
</template>
<script>
import Avator from 'h5-vue-croppers'
export default {
components: {
Avator,
},
data() {
return {
imageUrl: '',
state: false,
fileName: ''
}
},
methods: {
getCropData(files) {
console.log(files)//裁剪之后返回的文件流,用于上传服务器
},
avatorChange(e) {
const file = e.srcElement.files[0]
const imgURL = window.URL.createObjectURL(file)//处理input返回的file对象,得到一个图片的url传给裁剪组件
this.imageUrl = imgURL
this.fileName = file.name
this.state = true
},
cancelAvatorChoose() {
this.imageUrl = ''
this.state = false
},
}
}
</script>
文档
日志
#1.0.6 测试
#1.0.5 文档维护