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

Posted 2023-03-16

【中文标题】如何在 laravel 8 中为 vue 3 配置 Croppie？

【英文标题】：How to configure Croppie for vue 3 in laravel 8?

【发布时间】：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的安装有问题。

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

【参考方案1】：

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

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

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

import 'croppie/croppie.css';