无法读取 null vue-cropperjs 的属性“_init”答案

【问题标题】：Cannot read property '_init' of null vue-cropperjs无法读取 null vue-cropperjs 的属性“_init”
【发布时间】：2018-07-07 22:24:40
【问题描述】：

我有一个适用于 Laravel + VueJs 的项目。但我是初学者，我使用 Vue 的技能太低了。在这个项目中，我必须使用cropper-js (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);

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

无法读取 null 的属性“_init”

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

<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) 复制了这段代码。

但现在我明白了

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

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

【问题讨论】：

通常您使用提供的说明安装软件包。 npm install --save vue-cropperjs

标签： vue.js cropperjs

【解决方案1】：

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

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

【讨论】：