Saya mempunyai fungsi tanaman dengan Vue Advanced Cropper seperti yang ditunjukkan di bawah:

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 Saya:

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

Saya telah sertakan import untuk Cropper:

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

package.json:

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

Semuanya berfungsi dengan baik sehingga saya sampai ke fungsi pemangkasan yang menyatakan perkara berikut:

Uncaught TypeError: this.$refs.cropper.getResult bukan fungsi

Fikiran pertama saya ialah ia mungkin ada kaitan dengan menggelung berbilang imej, tetapi ia juga tidak berfungsi dengan hanya satu imej. Saya cuba menggabungkan bahagian dari cakera dan memuat naik ke pelayan dari sini: https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

---Edit ---

Saya juga mempunyai lalai eksport dan pemangkasan berfungsi, cuma saya tidak mendapat keputusan:

export default {

    components: {
        Cropper,
    },