vue3通过vue-cropper结合ElementPlus的Upload实现上传图片并剪切的功能

1.安装vue-cropper

npm install vue-cropper

2.在main.ts中引入

3.开始使用

 
<template>
    <el-dialog
      v-model="VisibleCropper"
      :close-on-click-modal="false"
      title="图片尺寸剪切">
      <vueCropper
        ref="cropper"
        style="width: 100%; height: 100%"
        :img="option.img"
        :outputSize="option.outputSize"
        :outputType="option.outputType"
        :info="option.info"
        :canScale="option.canScale"
        :autoCrop="option.autoCrop"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :fixedBox="option.fixedBox"
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :centerBox="option.centerBox"
        :infoTrue="option.infoTrue"
        :full="option.full"
        :enlarge="option.enlarge"
        :mode="option.mode"
      />
      <el-button type="primary" class="but-crop" @click="getCropDataBase64"
        >获取截取的图片</el-button
      >
    </el-dialog>

    <el-upload
          ref="upload"
          v-model:file-list="fileList"
          multiple
          class="pure-upload"
          list-type="picture-card"
          :show-file-list="multiple"
          :disabled="disabled"
          accept="image/jpeg,image/png,image/gif"
          :limit="props.limit > 1 ? props.limit : 100"
          :headers="{ Authorization: 'eyJhbGciOiJIUzUxMiJ9.admin' }" 
          :on-change="handleChange" 
        >
    </el-upload>

 </template>

<script lang="ts" setup>
import { ref, computed, reactive, watch } from "vue";
import type {
  UploadFile,
  UploadProps,
  UploadRequestHandler
} from "element-plus";


const cropper = ref();
const upload = ref();
const uploadFilePop = ref({});

const props = defineProps({
  // 剪切弹窗
  VisibleCropper: {
    type: Boolean,
    default: () => false
  },
  // 是否支持剪切功能
  isShear: {
    type: Boolean,
    default: () => true
  },
  // 默认生成截图框宽度
  autoCropWidth: {
    type: Number,
    default: 450
  },
  // 默认生成截图框高度
  autoCropHeight: {
    type: Number,
    default: 450
  },
});

let option = reactive({
  img: "", // 裁剪图片的地址 url 地址, base64, blob
  outputSize: 1, // 裁剪生成图片的质量
  outputType: "jpeg", // 裁剪生成图片的格式 jpeg, png, webp
  info: true, // 裁剪框的大小信息
  canScale: false, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: props.autoCropWidth, // 默认生成截图框宽度
  autoCropHeight: props.autoCropHeight, // 默认生成截图框高度
  fixedBox: true, // 固定截图框大小 不允许改变
  fixed: false, // 是否开启截图框宽高固定比例，这个如果设置为true，截图框会是固定比例缩放的，如果设置为false，则截图框的狂宽高比例就不固定了
  fixedNumber: [1, 1], // 截图框的宽高比例 [ 宽度 , 高度 ]
  canMove: true, // 上传图片是否可以移动
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  full: true, // 是否输出原图比例的截图
  enlarge: "1", // 图片根据截图框输出比例倍数
  mode: "contain" // 图片默认渲染方式 contain , cover, 100px, 100% auto
});

const getCropDataBase64 = () => {
  cropper.value.getCropData((data: any) => {
    option.img = data;
   })
}
// 点击上传图片之后打开截取弹窗
const handleChange: UploadProps["onChange"] = (uploadFile: UploadFile) => { 
  option.img = URL.createObjectURL(uploadFile.raw!);
  VisibleCropper.value = true;
};
</script>
<style scoped lang="scss">
 
</style>

更多方法与配置项可以直接去官网看：GitHub - xyxiao001/vue-cropper: A simple picture clipping plugin for vue