轻松优雅的图像裁剪器,可上传头像。
特征:
2020/09/05
$ npm i vue-avatar-cropper --save-dev
<template>
<div class="text-center">
<img v-if="userAvatar" :src="userAvatar">
<button id="pick-avatar">选择一张图片</button>
<avatar-cropper
@uploaded="handleUploaded"
trigger="#pick-avatar"
upload-url="/files/upload" />
</div>
</template>
<script>
import AvatarCropper from "vue-avatar-cropper"
export default {
components: { AvatarCropper },
data() {
return {
userAvatar: undefined,
}
},
methods: {
handleUploaded(resp) {
this.userAvatar = resp.relative_url;
}
}
}
</script>