更新记录

1.0.0（2025-08-21） 下载此版本

插件基于https://ext.dcloud.net.cn/plugin?id=11679的vue3版本 1.针对vue3进行兼容 2.对上传ico进行针对性优化

平台兼容性

uni-app(4.07)

好的，没问题。我已经为你准备了一份详细的 Uni-app 图片裁剪组件的使用说明文档，内容包含了完整的组件属性、事件表格以及一个可直接运行的使用示例。

以下是使用方法，请将以下内容复制到一个 Markdown 文件中即可。

Uni-app 通用图片裁剪组件

这是一个功能强大的 Uni-app 图片裁剪组件，支持自由拖拽、缩放、正方形裁剪等功能，并提供自定义配置和事件回调。

安装与使用

1. 将组件代码保存到本地

将提供的 .vue 文件代码保存到你的项目目录中，例如 components/uni-cropper/uni-cropper.vue。

2. 在页面中引入并使用

在你的页面 .vue 文件中，按照以下方式引入并注册组件：

<template>
    <view class="container">
        <uni-cropper
            :isSquare="true"
            @upload="onCropSuccess"
            @cancel="onCancelCrop"
            @error="onCropError"
        ></uni-cropper>
    </view>
</template>

<script setup>
import UniCropper from '@/components/picture-cutting/picture-cutting.vue'
// 裁剪成功回调
const onCropSuccess = (tempFilePath) => {
//在这里实现上传业务，
  uni.uploadFile({
                url: 'http://localhost:3000/upload/album', //传图片的接口
                filePath: tempFilePath,
                name: 'file',
                fileType: "image",
                success: uploadFileRes => {
                    // this.url = XXX;(后端传回来的图片地址)
                    console.log(uploadFileRes.data);
                }
            });

    console.log('裁剪成功，临时文件路径:', tempFilePath);
    uni.showToast({
        title: '裁剪成功',
        icon: 'success'
    });
};

// 取消裁剪回调
const onCancelCrop = () => {
    console.log('取消裁剪');
};

// 裁剪失败回调
const onCropError = (errMsg) => {
    console.error('裁剪失败:', errMsg);
    uni.showToast({
        title: '裁剪失败',
        icon: 'none'
    });
};
</script>

组件属性 (Props)

你可以通过传入不同的属性来配置组件的行为和样式。

组件事件 (Events)

组件通过事件向父组件传递状态和结果。