Vue - Advanced Cropper (Uncaught TypeError: this.$refs.cropper.getResult is not a function)

Question

我有一个像这样的 Vue Advanced Cropper 裁剪功能：

            crop() {
            const { canvas } = this.$refs.cropper.getResult();
            if (canvas) {
                const form = new FormData();
                canvas.toBlob(blob => {
                    form.append('files[]', blob);
                    // Perhaps you should add the setting appropriate file format here
                }, 'image/jpeg');

                this.formData = form;

            }

        },

我的HTML:

    <div v-if="cropView">
    <h1>Step 2: Crop images</h1>
    <div class="upload-example__cropper-wrapper">
        <div v-for="image in this.images" :key="image">
            <cropper ref="cropper" class="upload-example__cropper"
                     check-orientation :src="image.src"/>
            <button v-if="image.src" class="upload-example__button" @click="crop">Crop</button>
            <!--<div class="upload-example__reset-button" title="Reset Image" @click="reset()"></div>-->
            <div class="upload-example__file-type" v-if="image.type">
                {{ image.type }}
            </div>
        </div>
    </div>
</div>

我已经包含了 Cropper 的导入：

    import {Cropper} from 'vue-advanced-cropper'

来自 package.json 的版本：

"vue-advanced-cropper": "^2.8.1"

一切正常，直到我进入裁剪功能，它显示以下内容：
未捕获类型错误：this.$refs.cropper.getResult 不是一个函数

我的第一个想法是，它可能与循环多个图像有关，但它也不适用于 juse one。我试过将光盘中的部分组合起来并从这里上传到服务器： https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

--- 编辑 ---

我也有导出默认值，并且裁剪有效，只是没有得到结果：

    export default {

    components: {
        Cropper,
    },

Answer 1

考虑到您对 v-for 中的每个元素使用相同的引用名称，this.$refs.cropper 可能是一个数组。这也取决于您的 Vue 版本。如果是这种情况，您可能必须将参数传递给裁剪函数，以便调用元素的索引已知，并且可以正确调用 getResult。

尝试控制台记录 this.$refs。也可能看看这个线程是否有用？ Vue.js ref inside the v-for loop

Answer 2

aleksKamb 有正确的解决方案。应用索引后，它似乎正在工作。我将 v-for 编辑为：

            <div v-for="(image, index) in this.images" :key="image">
            <cropper ref="cropper" class="upload-example__cropper"
                     check-orientation :src="image.src"/>
            <button v-if="image.src" class="upload-example__button" @click="crop(index)">Crop</button>
            <!--<div class="upload-example__reset-button" title="Reset Image" @click="reset()"></div>-->
            <div class="upload-example__file-type" v-if="image.type">
                {{ image.type }}
            </div>
        </div>

然后我将裁剪功能编辑为：

            crop(index) {
            const { canvas } = this.$refs.cropper[index].getResult();
            if (canvas) {
                const form = new FormData();
                canvas.toBlob(blob => {
                    form.append('files[]', blob);
                    // Perhaps you should add the setting appropriate file format here
                }, 'image/jpeg');

            }
        },

Vue - Advanced Cropper (Uncaught TypeError: this.$refs.cropper.getResult is not a function)

Vue - Advanced Cropper (Uncaught TypeError: this.$refs.cropper.getResult is not a function)

javascript

vue.js