关于vue.js:裁剪上传图片

应用vue3和elementPlus实现上传图片裁剪
参考文章地址：https://chengpeiquan.com/article/vue-picture-cropper.html#demo

<template>  <!-- 抉择图片 -->  <input    ref="uploadInput"    type="file"    accept="image/jpg, image/jpeg, image/png, image/gif"    @change="selectFile"  />  <!-- 抉择图片 -->  <!-- 后果预览区 -->  <div v-if="result.dataURL && result.blobURL">    <p>裁切后的 Base64 图片预览：</p>    <div class="preview">      <img :src="result.dataURL" alt="组合式 API" />    </div>    <p>裁切后的 Blob 图片预览：</p>    <div class="preview">      <img :src="result.blobURL" alt="组合式 API" />    </div>    <p>能够按 F12 查看打印的 base64 / blob / file 后果</p>  </div>  <!-- 后果预览区 -->  <!-- 用于裁切的弹窗 -->  <el-dialog v-model="isShowDialog" title="图片裁切" :close-on-click-modal="false">    <template #footer>      <el-button @click="isShowDialog = false">勾销</el-button>      <el-button @click="clear">革除</el-button>      <el-button @click="reset">重置</el-button>      <el-button type="primary" @click="getResult">裁切</el-button>    </template>    <!-- 图片裁切插件 -->    <VuePictureCropper      :boxStyle="{        width: '100%',        height: '100%',        backgroundColor: '#f8f8f8',        margin: 'auto',      }"      :img="pic"      :options="{        viewMode: 1,        dragMode: 'crop',        aspectRatio: 16 / 9,      }"    />    <!-- 图片裁切插件 -->  </el-dialog>  <!-- 用于裁切的弹窗 --></template><script setup>import { reactive, ref } from 'vue'import VuePictureCropper, { cropper } from 'vue-picture-cropper'const isShowDialog = ref(false)const uploadInput = ref(null)const pic = ref('')const result = reactive({  dataURL: '',  blobURL: ''})/** * 抉择图片 */const selectFile = (e) => {  // 重置上一次的后果  result.dataURL = ''  result.blobURL = ''  // 如果有多个裁剪框，也须要重置掉裁剪指标的值，防止应用同一张图片无奈触发watch  pic.value = ''  // 获取选取的文件  const target = e.target  const { files } = target  if (!files) return  const file = files[0]  // 转换为base64传给裁切组件  const reader = new FileReader()  reader.readAsDataURL(file)  reader.onload = () => {    // 更新裁切弹窗的图片源    pic.value = String(reader.result)    // 显示裁切弹窗    isShowDialog.value = true    // 清空已抉择的文件    if (!uploadInput.value) return    uploadInput.value.value = ''  }}/** * 获取裁切后果 */const getResult = async () => {  console.log(cropper)  // 获取生成的base64图片地址  const base64 = cropper.getDataURL()  // 获取生成的blob文件信息  const blob = await cropper.getBlob()  // 获取生成的file文件信息  const file = await cropper.getFile({    fileName: '裁剪头像',  })  console.log({ base64, blob, file })  // 把base64赋给后果展示区  result.dataURL = base64  try {    result.blobURL = URL.createObjectURL(blob)  } catch (e) {    result.blobURL = ''  }  // 暗藏裁切弹窗  isShowDialog.value = false}/** * 革除裁切框 */const clear = () => {  cropper.clear()}/** * 重置默认的裁切区域 */const reset = () => {  cropper.reset()}</script><style scoped></style>