Javascript 无法在我的主vue组件中使用cropperjs获取最终裁剪版本

在我的laravel vue应用程序中，我使用cropperjs创建了一个ImageCropper组件。然后在我的父vue组件中，我在用户上传文件的更改事件中动态创建ImageCropper组件。我将图像url作为道具从主组件发送到子组件。ImageCropper的创建非常完美，裁剪机制也非常有效。唯一的问题是我只能跟踪裁剪后的图像以及ImageCropper组件中的图像更改，但无法跟踪或更新主组件中的数据，我需要从主组件中提交数据库中的数据。我的代码如下：

这是ImageCropper组件：

<template>
    <div class="card">
        <img ref="image" :src="imageSource" style="width: 100%;">
        <img ref="destinationImage" :src="destination" class="img-fluid">

    </div>
</template>
<script>
    import Cropper from 'cropperjs';
    export default {
        name: 'ImageCropper',
        props: {
            imageSource: String,
        },
        data() {
            return {
                cropper: {},
                destination: {},
                image: {},
            }
        },
        mounted() {
            this.image = this.$refs.image;

            this.cropper = new Cropper(this.image, {
                zoomable: false,
                scalable: false,
                aspectRatio: 16 / 9,
                viewMode: 1,
                background: false,
                crop: () => {
                    const canvas = this.cropper.getCroppedCanvas();
                    this.destination = canvas.toDataURL("image/png");

                },

            });

        },




    }

</script>

从“cropperjs”导入裁剪器；
导出默认值{
名称：“ImageCropper”，
道具：{
imageSource:String，
},
数据（）{
返回{
裁剪器：{}，
目的地：{}，
图像：{}，
}
},
安装的（）{
this.image=this.$refs.image；
this.crapper=新裁剪器（this.image{
可缩放：错误，
可伸缩性：错误，
专题：16/9，
查看模式：1，
背景：错，
作物：（）=>{
const canvas=this.crapper.getcrappedcanvas（）；
this.destination=canvas.toDataURL（“image/png”）；
},
});
},
}

从这个组件中，我可以通过“this.destination”跟踪最终图像及其更新。 这是我的主组件：

<template>
    <div>
        <div>
            <input @change="changePhoto($event)" name="photo" type="file">
        </div>
        <div ref="imageCropperArea"></div>
    </div>
</template>
<script>
    import ImageCropper from './../../ImageCropper.vue';
    export default {
        name: "New",
        data() {
            return {
                temp_photo: '',
                final_photo: '',

            }
        },
        components: {
            ImageCropper
        },
        methods: {
            createImageCropping(event) {
                var ComponentClass = Vue.extend(ImageCropper)
                var instance = new ComponentClass({
                    propsData: {
                        imageSource: this.form.temp_photo
                    }
                })
                instance.$mount()
                this.$refs.imageCropperArea.appendChild(instance.$el)

            },
            changePhoto(event) {
                let file = event.target.files[0];


                let reader = new FileReader();
                reader.onload = event => {
                    this.form.temp_photo = event.target.result
                    this.createImageCropping(event)

                };
                reader.readAsDataURL(file);


            },
        }

    }

</script>

从“/../../ImageCropper.vue”导入ImageCropper；
导出默认值{
名称：“新”，
数据（）{
返回{
临时照片：''，
最后一张照片：''，
}
},
组成部分：{
图像裁剪器
},
方法：{
createImageCropping（事件）{
var ComponentClass=Vue.extend（ImageCropper）
var实例=新组件类({
propsData：{
图像来源：this.form.temp_照片
}
})
实例。$mount（）
此.refs.imageCropperArea.appendChild（实例.$el）
},
更改照片（活动）{
让file=event.target.files[0]；
let reader=new FileReader（）；
reader.onload=事件=>{
this.form.temp_photo=event.target.result
此.createImageCropping（事件）
};
reader.readAsDataURL（文件）；
},
}
}

---

我所需要的只是在裁剪过程中更新“final_photo”变量。我正在查看vuex，以便在数据更改时使用vue store传递数据，但由于我是vuex新手，因此无法在ImageCropper组件中配置vuex。我可以从主组件访问store.js，但不能从ImageComponent访问。我也不确定这是否是实现我的目标的正确途径。

您可以发出事件以将任何数据发送回父组件。有关更多信息，请参阅

在您的情况下，您可以执行以下操作：

。。。
挂载（）{
...
this.crapper=新裁剪器（this.image{
...
作物：（）=>{
const canvas=this.crapper.getcrappedcanvas（）
此.emit（'crop'，canvas.toDataURL（'image/png'））
}
})
}
...

及

。。。
createImageCropping（事件）{
...
实例。$on（'crop'，dataUrl=>{
//现在，您可以调度一个操作来更新存储状态
})
...
}
...

我不确定为什么要创建这样的ImageCropper实例，但大多数情况下，您不需要这样做。您可以只使用组件或动态组件。了解更多关于

因此，您可以执行以下操作：

...

在您的

changePhoto

方法中，在读取器完成后，只需设置

imageSource

：

。。。
更改照片（活动）{
const file=event.target.files[0]
const reader=new FileReader（）
reader.onload=事件=>{
this.imageSource=event.target.result
}
reader.readAsDataURL（文件）；
}
...

非常感谢buddy@User 28。实际上，这是我第一次使用vuex，并在vue中简单地使用它。你的建议帮了大忙