移动端图片上传裁剪二次封装

1、插件 vue-cropper-h5 ，官网地址
具体安装步骤看官网，官网写的很详细
注意vue3还要单独引入 vue-cropper-h5/dist/style.css
想要自己设置上传的input，设置hide-input属性，和loadFile()接口一起使用,如果对上传的图片没有限制，可以直接使用他的上传
封装代码：

<template>
  <div>
    <van-uploader
      :after-read="afterRead"
      :max-count="maxCount"
      v-model="files"
      @delete="deleteImg"
      style="width: 1.78rem; height: 0.8rem"
    >
      <img :src="defaultImg" class="upload_img" alt="" />
    </van-uploader>
    <!-- option是配置，格式是对象-->
    <h5-cropper
      ref="cropper"
      :hide-input="true"
      :option="option"
      @getbase64Data="getbase64Data"
      @getblobData="getblobData"
      @getFile="getFile"
      @canceltailor="cancelCropper"
    />
  </div>
</template>
<script>
export default {
  name: 'UploadCropper',
}
</script>
<script setup>
import $api from '@/api/index.js'
import H5Cropper from 'vue-cropper-h5'
import 'vue-cropper-h5/dist/style.css'
import { ref, watch } from 'vue'
const props = defineProps({
  option: {
    type: Object,
    default: () => ({
      fixedNumber: [1, 1], //截图框的宽高比例,[宽度, 高度]
      fixed: true, //是否开启截图框宽高固定比例
      canMove: true, //上传图
       canMoveBox: false, //截图框能否拖动
      outputSize: 1, //裁剪生成图片的质量,可选值0.1 - 1
      info: true, //裁剪框的大小信息
    }),
  },
  maxCount: {
    type: Number,
    default: 1,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
  defaultImg: {
    type: String,
    default: 'xxxx.png',
  },
  height: { //设置图片的宽度
    type: String,
    default: '0.8rem',
  },
  width: {  //设置图片的高度
    type: String,
    default: '1.78rem',
  },
  borderRadius: { //设置图片的圆角
    type: String,
    default: '0.08rem',
  },
})
const cropper = ref(null) //裁剪框
const files = computed({
  get() {
    return $props.modelValue
  },
  set(newVal) {
    $emit('update:modelValue', newVal)
  },
})
// 获取裁剪完成的 Base64 数据
const getbase64Data = (data) => {
  console.log(data)
}
// 获取裁剪完成的 Blob 数据
const getblobData = (data) => {
  console.log(data)
}
const isStop = ref(false)
// 获取裁剪完成的 File 数据,上传图片,此方法有bug会执行两次，isStop控制一下
const getFile = async (data) => {
  if (isStop.value) return
  isStop.value = true
  const formData = new FormData()
  formData.append('file', data)
  await $api.base.uploadImg(formData).then((res) => {
    files.push(res)
  })
}
// 图片选择
const afterRead = (data) => {
  cropper.value.loadFile(data.file)//调用组件自带的loadFile接口
  data.status = 'uploading'
  isStop.value = false
}
// 取消裁剪
const cancelCropper = () => {
  files.value = []
}
</script>
<style scoped>
.upload_img {
  width: v-bind(width);
  height: v-bind(height);
  border-radius: v-bind(borderRadius);
}
:deep(.van-uploader__preview-image) {
  width: v-bind(width);
  height: v-bind(height);
  border-radius: v-bind(borderRadius);
}
</style>

组件的使用：

<UploadCropper v-model="fileList" width="180px" height="80px" />