更新记录

1.0.0（2025-04-10）

初次版本

平台兼容性

插件名：zmt-avatar-cropper

主要完美支持PC浏览器端，APP和小程序没有测试，如需要请自行测试。 本人搜了很久，没找到一款真正适合PC浏览器端的图片裁剪插件，头疼了很久，一生气索性写一个吧，本人亲自测试编写的，自己用的没有任何问题，直接返回上传到云存储后的网上路径和本地临时路径（非常完美和神奇）。

使用方法：

直接导入到你的项目中，目录：uni_modules，无需引入，直接使用就行。代码如下：

<zmt-avatar-cropper @close="updateShowCrop" @confirm="uploadSuccess" :isShow="showCrop" :imageSrc="imageSrc"></zmt-avatar-cropper>

属性说明如下：

imageSrc路径说明

此路径为通过uniapp选取后的临时路径地址，选取代码如下：

//编辑头像
editAvatar(){
    var that = this;
    uni.chooseImage({
        count: 1, 
        sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
            that.showCrop=true;
            that.imageSrc = res.tempFilePaths[0]; //此路径就是要传给插件的路径
        }
    });
},

事件说明如下：

@confirm事件详细说明

此事件会返回以下参数数据：

confirm事件示例代码

//裁剪并上传图片以后

uploadSuccess(e){
    console.log('返回参数',e);
    var that = this;
    var avatar = e.fileID;
    if(this.userinfo && this.userinfo._id){
        //修改头像
        db.collection('uni-id-users').where({_id:this.userinfo._id}).update({avatar:avatar}).then(res=>{
        this.userinfo.avatar = avatar;
        uni.setStorage({
            key:'login-****',
            data:that.userinfo
        })
    });
    }

}

@close事件详细说明

此事件主要是用来更新父组件的关闭状态值showCrop，否则会导致第二次无法弹出的情况。

//子组件传过来的更新父组件的状态
updateShowCrop(e){
    this.showCrop = e;
}

特殊说明：

uniapp与uniCloud是完美组合，最好开通uniapp自己的云服务空间，可以直接将文件上传到云存储和到云数据库。到此结束，辛苦编写，还请支持。