基于Vue的移动端图片裁剪组件(Clipic)可自动压缩
安装:
Bash
npm install --save clipic
使用代码:
Markup
<template>
<div>
<div class="photo">
<img :src="base64" />
<input type="file" name="file" ref="files" accept="image/*" @change="uploadImg" />
</div>
</div>
</template>
<script>
import Clipic from 'clipic'
const clipic = new Clipic()
export default {
components: {},
data() {
return {
base64: '',
}
},
methods: {
uploadImg() {
let _this = this
const files = this.$refs.files.files
const reader = new FileReader()
reader.readAsDataURL(files[0])
reader.onload = (img) => {
clipic.getImage({
width: 200,
height: 200,
src: img.target.result,
onDone: (base64) => {
//这里就是上传完成的回调函数,可以在这里请求接口上传至服务器
_this.base64 = base64
console.log(this.base64) //图片上传完成后生成的base64
},
})
}
//执行完成之后把input的value值置空,否则无法选择相同的图片
this.$refs.files.value = ''
},
},
}
</script>
<style scoped lang="less">
.photo{
width: 100px;
img{
width: 100%;
}
}
</style>
<style >
</style>使用展示:


蜀ICP备16028301号-5