Vue - 高级 Cropper（未捕获类型错误：this.$refs.cropper.getResult 不是函数）

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不是函数

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

--- 编辑 ---

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

export default {

    components: {
        Cropper,
    },

Answer 1

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

            
            Crop
            
            

                {{ image.type }}
            
        

然后我将裁剪函数编辑为：

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');

            }
        },

Answer 2

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

尝试控制台记录 this.$refs。 也可以看看这个线程是否有用？ v-for 循环内的 Vue.js 引用 p>