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

Question

我有一个为Laravel +VueJ工作的项目。但是我是初学者，我使用Vue的技能太低了。在这个项目中，我必须使用cropper (https://github.com/fengyuanchen/cropperjs#cropperjs)。我找到了一个实现这个库专门用于vue-js (https://github.com/Agontuk/vue-cropperjs)。我从package.json复制了一个字符串

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

执行

npm安装

比，在我的app.js里，我写

从‘vue-cropperjs’导入VueCropper；Vue.use(VueCropper)；

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

无法读取属性'_init‘的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)。

但现在我得到了

无法读取未定义的属性“替换”

谁能分辨出错误是什么，我做错了什么？

Answer 1

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

在来源中，有一个render函数，<vue-cropper ref='cropper' ...>和以后的代码使用这个引用this.$refs.cropper。您可以找到有关ref 这里的更多信息。