无法读取空 vue-cropperjs 的 属性 '_init'

Question

我有一个适用于 Laravel + VueJs 的项目。但是我是初学者，我对Vue的使用水平太低了。在这个项目中，我必须使用 cropper-js (https://github.com/fengyuanchen/cropperjs#cropperjs). I found an implementation this library special for vue-js (https://github.com/Agontuk/vue-cropperjs)。我从 package.json 复制了一个字符串

"vue-cropperjs": "https://github.com/Agontuk/vue-cropperjs.git#master"

并执行

npm install

然后，在我的 app.js 中，我写了

import VueCropper from 'vue-cropperjs'; Vue.use(VueCropper);

启动应用程序后，在控制台中，我看到下一个文本

Cannot read property '_init' of null

我也尝试直接在组件文件中使用该代码

<template>
<div class="col-md-12">
    <input type="file" name="image" accept="image/*"
           style="font-size: 1.2em; padding: 10px 0;"
           @change="setImage($event)"
    />
</div>
</template>
<script>
    import VueCropper from 'vue-cropperjs';
    export default {
        name : 'userfiles',
        data: function(){
        return {
            imgSrc: '',
            cropImg: ''
        }
    },
    methods:{
        setImage(e){
            const file = e.target.files[0];
            if (!file.type.includes('image/')) {
                alert('Please select an image file');
                return;
            }
            if(typeof FileReader === 'function'){
                const reader = new FileReader();
                reader.onload = (event) => {
                    this.imgSrc = event.target.result;
                    this.cropper.replace(event.target.result);
                };
                reader.readAsDataURL(file);
            }else{
                alert('Sorry, FileReader API not supported');
                }
            }
        }
    }
</script>

这段代码是我从这里复制的 (https://github.com/Agontuk/vue-cropperjs/blob/master/example/src/App.js)。

但现在我得到

Cannot read property 'replace' of undefined

任何人都可以告诉我错误是什么以及我做错了什么？

Answer 1

看来你没有直接复制source。 this.cropper.replace(event.target.result); 行导致错误。您的组件中没有 copper 作为 props/data/method/computed/ref 等。

在 source 中，有一个 render 函数，<vue-cropper ref='cropper' ...> 和以后的代码使用此引用 this.$refs.cropper。您可以在此处.

找到有关 ref 的更多信息