vue3 移动端裁切图片后上传

1.安装vue-imgcut和less-loader 

npm install vue-imgcut --save  
npm install less-loader -save

2.页面引入及使用

<imgCut  ref="Uppicinput" @callback="callback" :width="480" :height="270">
    <img v-if="imageUrl" class="pic" :src="imageUrl">
    <div class="camera-btn">
        <img width="16" height="16" src="images/camera.png">
    </div>
</imgCut>

import { imgCut } from 'vue-imgcut'
export default {
    name:'demo',
    components: {
        imgCut,
    },
    setup() {
        const imageUrl = ref('')
        const callback = (img) => {
            imageUrl.value = img
        }
        return{
            imageUrl,
            callback
        }
    }
}

 

效果图片