在Vue开发中，图片上传与裁剪功能是许多项目中常见的需求。合理实现这两个功能，能够有效提升用户体验，优化项目的交互性。

首先来看看图片上传功能的实现。在Vue中，借助HTML的<input>标签的type="file"属性来触发文件选择框。通过@vueuse/core库中的useIntersectionObserver函数，可以实现图片的懒加载，提升页面性能。例如：

<template>
  <input type="file" @change="onFileChange">
</template>

<script setup>
import { ref } from 'vue';

const selectedFile = ref(null);

const onFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    selectedFile.value = file;
    // 这里可以添加上传逻辑，例如使用axios发送文件到服务器
  }
};
</script>

上述代码中，当用户选择文件后，onFileChange方法获取到选中的文件并存储在selectedFile中。接下来可以使用axios库将selectedFile发送到服务器进行处理。

图片裁剪功能的实现可以借助一些优秀的第三方库，比如cropperjs。它提供了强大且灵活的图片裁剪功能。需要安装cropperjs库：npm install cropperjs --save。然后在Vue组件中引入并使用：

<template>
  <div>
    <img ref="imageRef" alt="待裁剪图片">
    <div id="cropper"></div>
    <button @click="cropImage">裁剪图片</button>
  </div>
</template>

<script setup>
import Cropper from 'cropperjs';
import { ref } from 'vue';

const imageRef = ref(null);
const cropper = ref(null);

const cropImage = () => {
  if (cropper.value) {
    const croppedCanvas = cropper.value.getCroppedCanvas();
    croppedCanvas.toBlob((blob) => {
      // 这里可以将裁剪后的图片blob发送到服务器
    }, 'image/jpeg', 0.9);
  }
};

const initCropper = () => {
  cropper.value = new Cropper(imageRef.value, {
    aspectRatio: 1 / 1,
    viewMode: 1
  });
};

initCropper();
</script>

在上述代码中，通过Cropper类初始化图片裁剪器，用户点击“裁剪图片”按钮时，获取裁剪后的图片并转换为blob格式，之后可以将其发送到服务器。

通过上述方法，在Vue开发中能够轻松实现图片上传与裁剪功能，为项目增添丰富的交互体验。