suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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,
    },


P粉054616867P粉054616867356 Tage vor540

Antworte allen(2)Ich werde antworten

  • P粉401527045

    P粉4015270452023-12-15 13:51:54

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

    {{ 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');
    
                }
            },

    Antwort
    0
  • P粉949848849

    P粉9498488492023-12-15 11:41:50

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

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

    Antwort
    0
  • StornierenAntwort