如何在 laravel 8 中为 vue 3 配置 Croppie？答案

【问题标题】：How to configure Croppie for vue 3 in laravel 8?如何在 laravel 8 中为 vue 3 配置 Croppie？
【发布时间】：2022-01-04 16:22:12
【问题描述】：

在一个 vue 页面中，我添加了一个 ImageUpload 组件，遵循本教程：https://www.youtube.com/watch?v=kvNozA8M1HM

它或多或少地起作用。没有错误，但它只显示我的图像和标尺。我可以使用标尺进行缩放，但它不显示边界、圆圈等。它与教程中的示例完全不同...... 可以这么说，它是越野车。

<template>
    <div class="Image-Upload-wrapper Image-upload"> 
        <p> 
            This is image upload wrapper component
        </p>
            <div id="croppie"> </div>        


    </div>
</template>



<script>
//  uitleg over Croppie::https://www.youtube.com/watch?v=kvNozA8M1HM
import Croppie from 'croppie';

export default {
    props:[
        'imgUrl'
    ],

    mounted(){
        this.image = this.imgUrl   // als component is mounted, this.image definieren, en daartmee croppie in..
        this.setUpCroppie()
    },
    data(){
        return{
           image:null,
           croppie:null
        }
    },
    methods:{
        setUpCroppie(){
           let el = document.getElementById('croppie');
           this.croppie = new Croppie(el, {
               viewport:{width:200,height:200,type:'circle'},
               boundary:{ width:220,height:220},
               showZoomer:true,
               enableOrientation: true
           });
           this.croppie.bind({       
               url:this.image
           });
        }
    }
}
</script>

放在parent中如下：

template>
<div>
    <h2>Cards 1</h2>
    
        <div class="form-group">
            <input type="text" class="form-control" :placeholder="card.title" v-model="card.title">
        </div>

        <div class="form-group">
            <textarea  class="form-control" :placeholder="card.description" v-model="card.description">
            </textarea>
        </div>
 
                

        <div id="preview" v-if="url" >
            <h4> Preview</h4>
            <ImageUpload  :imgUrl="url"></ImageUpload> 
            <!-- <img  class="img-circle" style="width:150px"  :src="url" /> -->
        </div>

        <input type="file" v-on:change="onFileChange" ref="fileUpload" id="file_picture_input">

        
        <button @click="editCard(currentSpelerCard)" class="btn btn-warning m-1" style="width:100px;color:black">  Save Card  </button>


    
</div>
</template>

在我的 package.json 我有：

"croppie": "^2.6.5",

在 webpack 组合中我有：

mix.js('resources/js/app.js', 'public/js')
mix.vue();
mix.sass('resources/sass/app.scss', 'public/css');

感觉croppie的安装有问题。

有谁知道这可能是什么问题？

【问题讨论】：

标签： laravel vuejs3 croppie

【解决方案1】：

谷歌上我发现了这个评论：

"#由于这个包也依赖于croppie.css，所以你必须在你的app.js中导入它 import 'croppie/croppie.css'"

我在 bootstrap.js 中添加了以下行：

import 'croppie/croppie.css';

【讨论】：