Vue – Advanced Cropper (Nicht abgefangener TypeError: this.$refs.cropper.getResult ist keine Funktion)

Question

Ich habe eine Zuschneidefunktion mit Vue Advanced Cropper, wie unten gezeigt:

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;

            }

        },

Mein 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>

Ich habe den Import für Cropper eingefügt:

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

Version in

package.json:

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

Alles funktioniert gut, bis ich zur Zuschneidefunktion komme, wo Folgendes steht:

Uncaught TypeError: this.$refs.cropper.getResult ist keine Funktion

Mein erster Gedanke war, dass es vielleicht etwas mit der Schleife mehrerer Bilder zu tun hat, aber mit nur einem Bild funktioniert es auch nicht. Ich habe versucht, die Teile von der CD zu kombinieren und von hier aus auf den Server hochzuladen: https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

---Bearbeiten ---

Ich habe auch die Export-Standardeinstellungen und das Zuschneiden funktioniert, ich bekomme einfach keine Ergebnisse:

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 引用