npm引入

npm install vue-cropper

组件代码 

<template>
  <input
    type="file"
    accept="image/*"
    @change="onChange"
    id="fileBtn"
    style="display: none"
  />
  <el-button @click="uploadClick">图片上传</el-button>
  <el-dialog
    v-model="dialogVisible"
    title="图片裁剪"
    width="50%"
    :before-close="
      () => {
        dialogVisible = false;
      }
    "
  >
    <div style="width: 100%; height: 50vh">
      <vueCropper
        ref="cropperRef"
        :img="options.img"
        :info="true"
        :infoTrue="options.infoTrue"
        :auto-crop="options.autoCrop"
        :fixed-box="options.fixedBox"
        :fixedNumber="options.fixedNumber"
        :fixed="options.fixed"
        :centerBox="options.centerBox"
        @realTime="realTime"
      >
      </vueCropper>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="" @click="refreshCrop">重置</el-button>
        <el-button type="primary" @click="finish"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 裁剪的内容 -->
  <!-- <div :style="previews.div" style="float: left">
    <div v-html="previews.html"></div>
  </div> -->
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import VueCropper from "vue-cropper/src/vue-cropper.vue";
interface Options {
  img: string | ArrayBuffer | null; // 裁剪图片的地址
  info: true; // 裁剪框的大小信息
  outputSize: number; // 裁剪生成图片的质量 [1至0.1]
  outputType: "jpeg"; // 裁剪生成图片的格式
  canScale: boolean; // 图片是否允许滚轮缩放
  autoCrop: boolean; // 是否默认生成截图框
  autoCropWidth: number; // 默认生成截图框宽度
  autoCropHeight: number; // 默认生成截图框高度
  fixedBox: boolean; // 固定截图框大小 不允许改变
  fixed: boolean; // 是否开启截图框宽高固定比例
  fixedNumber: Array<number>; // 截图框的宽高比例  需要配合centerBox一起使用才能生效
  full: boolean; // 是否输出原图比例的截图
  canMoveBox: boolean; // 截图框能否拖动
  original: boolean; // 上传图片按照原始比例渲染
  centerBox: boolean; // 截图框是否被限制在图片里面
  infoTrue: boolean; // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
}

const options: Options = reactive({
  img: "", // 需要剪裁的图片
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 150, // 默认生成截图框的宽度
  autoCropHeight: 150, // 默认生成截图框的长度
  fixedBox: false, // 是否固定截图框的大小 不允许改变
  info: true, // 裁剪框的大小信息
  outputSize: 0.5, // 裁剪生成图片的质量 [1至0.1]
  outputType: "jpeg", // 裁剪生成图片的格式
  canScale: false, // 图片是否允许滚轮缩放
  fixed: false, // 是否开启截图框宽高固定比例
  fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效
  full: true, // 是否输出原图比例的截图
  canMoveBox: false, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
});
const previews: any = ref({});
let fileItem = reactive({});
const cropperRef: any = ref({});
const dialogVisible = ref(false);
// 触发点击事件
const uploadClick = () => {
  document.getElementById("fileBtn")?.click();
};
const onChange = (e: any) => {
  const file = e.target.files[0];
  fileItem = file;
  console.log("file:", file);
  const URL = window.URL || window.webkitURL;
  options.img = URL.createObjectURL(file);
  console.log("options.img:", options.img);
  dialogVisible.value = true;
};
const refreshCrop = () => {
  cropperRef.value.refresh();
};
// 上传图片（点击保存按钮）
const finish = () => {
  // cropperRef.value.getCropData((data: any) => {
  //   // console.log("获取截图的 base64 数据:", data);
  //   // data为base64图片，供接口使用
  // });
  cropperRef.value.getCropBlob((data: any) => {
    console.log("获取截图的 blob 数据:", data);
    // 下面是将blob转为formData
    let formData = new FormData();
    formData.append("file", data, new Date().getTime() + ".jpg");
    console.log("formData:", formData);
    // 下面是将blob转换为file
    data.lastModifiedDate = new Date(); // 文件最后的修改日期
    let file = new File([data], fileItem?.name, {
      type: data.type,
      lastModified: Date.now(),
    });
    console.log("file:", file);
    console.log("fileItem:", JSON.parse(JSON.stringify(fileItem)));
  });
  dialogVisible.value = false;
};
// 裁剪之后的数据
const realTime = (data: any) => {
  // console.log("realTime:", data);
  previews.value = data;
};
</script>