Vue - Advanced Cropper (Uncaught TypeError : this.$refs.cropper.getResult n'est pas une fonction)

Question

J'ai une fonction de recadrage avec Vue Advanced Cropper comme indiqué ci-dessous :

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;

            }

        },

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

J'ai inclus l'importation pour Cropper :

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

Version dans

package.json :

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

Tout fonctionne bien jusqu'à ce que j'arrive à la fonction de recadrage où il est indiqué ce qui suit :

Uncaught TypeError : this.$refs.cropper.getResult n'est pas une fonction

Ma première pensée a été que cela pourrait avoir quelque chose à voir avec la mise en boucle de plusieurs images, mais cela ne fonctionne pas non plus avec une seule image. J'ai essayé de combiner les parties du disque et de les télécharger sur le serveur à partir d'ici : https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

---Modifier ---

J'ai aussi des paramètres d'exportation par défaut et le recadrage fonctionne, je n'obtiens tout simplement pas les résultats :

export default {

    components: {
        Cropper,
    },

Answer 1

aleksKamb a trouvé la bonne solution. Après avoir appliqué l'index, cela semble fonctionner. J'ai édité v-for pour :

            
            Crop
            
            

                {{ image.type }}
            
        

Ensuite, j'ai modifié la fonction de recadrage pour :

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

Étant donné que vous utilisez le même nom de référence pour chaque élément de votre v-for , this.$refs.cropper est probablement un tableau. Cela dépend également de votre version de Vue. Si tel est le cas, vous devrez peut-être transmettre des arguments à votre fonction de découpage afin que l'index de l'élément appelant soit connu et que getResult puisse être appelé correctement.

Essayez de consigner ceci sur la console.$refs. Voyez aussi si ce fil est utile ? Référence Vue.js dans la boucle v-for