封装vue-cropper，图片裁剪组件

组件基本使用:

这里的action同时也可以传相对路径，比如封装了axios，那么组件源码里就不需要引入原生axios，可以替换为封装的axios。传 action="/upload/file"

源代码：

<script setup>
import WuyuCropper from '@/components/wuyu-cropper/index.vue'

function result(data) {
     
     
  console.log(data)
}

// 默认头像
const defaultAvatar = 'https://img.yzcdn.cn/vant/cat.jpeg'
</script>

<template>
  <wuyu-cropper @result="result"
                :src="defaultAvatar"
                action="http://localhost:9090/upload/file">
  </wuyu-cropper>
</template>

<style lang="scss" scoped>
</style>

组件属性

名称	类型	默认值	是否必需	说明
maxSize	Number	5	否	单位：MB，图片大小限制
fixedNumber	Array	[1,1]	否	裁剪比例
src	String	“”	否	初始化图片回显
action	String	#	是	上传接口
headers	Object	{}	否	请求头

组件事件

名称	参数列表	说明
result	(url)	裁剪结束提交后触发该事件，并传递裁剪后的图片url

组件插槽

名称	参数列表	说明
default	无	自定义按钮，打开裁剪框

组件源码

环境： vue3+element plus+axios+vue-cropper，
可选：vueuse的防抖动函数 useDebounceFn，如果不需要可以去掉

pnpm add vue-cropper@1.1.4 
pnpm add @vueuse/core@11.1.0

<!--可能需要修改 submit函数，根据后端返回值做处理 -->
<script setup>
import {
     
     ref} from "vue";
import 'vue-cropper/dist/index.css'
import {
     
     VueCropper} from "vue-cropper";
import {
     
     useDebounceFn} from "@vueuse/core";
import {
     
     ElMessage} from "element-plus";
import axios from "axios";

const emit = defineEmits(['result'])
const prop = defineProps({
     
     
  // 单位: MB
  maxSize: {
     
     
    type: Number,
    default: 5
  },
  fixedNumber: {
     
     
    type: Array,
    default: () => [1, 1]
  },
  src: {
     
     
    type: String,
    default: ''
  },
  action: {
     
     
    type: String,
    default: '#'
  }