Vue3中使用vue-cropperjs实现图片裁剪、预览与上传功能(附详细代码)

npm install vue-cropperjs cropperjs

import VueCropper from "vue-cropperjs";
import "cropperjs/dist/cropper.css";

<template>
  <div class="flex flex-col items-center">
    <!-- 选择图片 -->
    <div>
      <label for="avatar" class="cursor-pointer rounded-full"></label><!-- 这里使用了 Tailwind Css来控制样式 -->
      <input
        type="file"
        id="avatar"
        @change="handleFileChange"
        accept="image/*"
        style="display: none"
      />
    </div>

    <!-- 裁剪区域 -->
    <div class="w-[200px] h-[200px]">
      <vue-cropper
        ref="cropper"
        :src="imageUrl"
        :aspect-ratio="1 / 1"
        :auto-crop-area="0.8"
        :view-mode="2"
        guides
        background
      ></vue-cropper>
    </div>

    <!-- 显示裁剪后的图片 -->
    <div v-if="croppedImage">
      <img
        class="w-[200px] h-[200px] rounded-full"
        :src="croppedImage"
        alt="裁剪后的图片"
      />
    </div>

    <!-- 操作按钮 -->
    <button @click="cropImage">裁剪图片</button>
    <button @click="uploadFile">上传图片</button>
    <p v-if="errorMessage" style="color: red">{{ errorMessage }}</p>
    <p v-if="uploadStatus">{{ uploadStatus }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";
import VueCropper from "vue-cropperjs";
import "cropperjs/dist/cropper.css";

// 响应式数据
const imageUrl = ref(""); // 原始图片 URL
const croppedImage = ref(""); // 裁剪后的图片 URL
const errorMessage = ref(""); // 错误信息
const uploadStatus = ref(""); // 上传状态
const cropper = ref(null); // 裁剪组件实例

// 选择图片文件
const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    imageUrl.value = URL.createObjectURL(file); // 将文件转换为 URL
  }
};

// 裁剪图片
const cropImage = () => {
  cropper.value.getCroppedCanvas().toBlob((blob) => {
    croppedImage.value = URL.createObjectURL(blob); // 生成 Blob URL
  });
};

// 上传图片
const uploadFile = () => {
  if (!croppedImage.value) {
    errorMessage.value = "请先裁剪图片";
    return;
  }

  // 获取裁剪后的 Canvas 并转换为 Blob
  cropper.value.getCroppedCanvas().toBlob((blob) => {
    // 创建 FormData 对象
    const formData = new FormData();
    formData.append("file", blob, "cropped-image.png"); // 将 Blob 添加到 FormData

    // 上传到服务器，这里简单做了个示范，根据后端接口或上传方式自行更改
    fetch("/upload", {
      method: "POST",
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        uploadStatus.value = "上传成功！";
        console.log("服务器返回的数据：", data);
      })
      .catch((error) => {
        errorMessage.value = "上传失败";
        console.error("上传错误：", error);
      });
  });
};
</script>

.cropper-view-box,
.cropper-face {
  border-radius: 50%;
}