0

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

但现在我明白了

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

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

4

1 回答 1

1

看来您不是直接复制源代码。该行this.cropper.replace(event.target.result);导致错误。您的组件中没有copperas props/data/method/computed/refetc 。

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

于 2018-01-29T09:49:19.460 回答