更新记录

1.0.0（2023-04-10） 下载此版本

简单通用的图片裁剪裁切上传组件

平台兼容性

组件属性

组件事件

使用说明

<template>
    <view class="">
        <button @tap="choose">上传图片</button>
        <yhdslCropper ref="yhdslCropper" :quality="1" mode="scale"  @uploadImg="uploadImg" :scale="scale"></yhdslCropper>
        <image :src="url" mode="widthFix" style="width: 400rpx;"></image>
    </view>
</template>

<script>
import yhdslCropper from '@/components/yhdsl-cropper/yhdsl-cropper.vue';
export default {
    data() {
        return {
            url: '',
            scale:1
        };
    },
    components: {
        yhdslCropper
    },
    methods: {
        choose() {
            // 调用实例的chooseImg方法，拉起图片选择界面，待图片选择完毕后直接进入图片截取界面
            this.$refs.yhdslCropper.chooseImage();
        },
        // 裁剪完成时,返回截取图片的临时路径
        uploadImg(e) {
            this.url = e;
            uni.uploadFile({
                url: 'http://localhost:3000/upload/album', //传图片的接口
                filePath: e,
                name: 'file',
                fileType: "image",
                success: uploadFileRes => {
                    // this.url = XXX;(后端传回来的图片地址)
                    console.log(uploadFileRes.data);
                }
            });
        }
    }
};
</script>
<style></style>