Question

我有一个适用于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 install

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

从＆＃39; vue-cropperjs＆＃39;导入VueCropper; Vue.use（VueCropper）;

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

无法阅读财产＆＃39; _init＆＃39;为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）。

但现在我

无法阅读财产＆＃39;替换＆＃39;未定义的

任何人都能分辨出错误是什么以及我做错了什么？

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 here的更多信息。

无法阅读财产＆＃39; _init＆＃39; null vue-cropperjs

1 个答案: