Vue - Advanced Cropper (Uncaught TypeError: this.$refs.cropper.getResult bukan fungsi)
P粉054616867
P粉054616867 2023-12-14 15:01:09
0
2
545

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'
Versi dalam

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


P粉054616867
P粉054616867

membalas semua(2)
P粉401527045

aleksKamb menemui penyelesaian yang tepat. Selepas menggunakan indeks nampaknya berfungsi. Saya mengedit v-for kepada:

{{ image.type }}

Kemudian saya menyunting fungsi tanaman kepada:

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

            }
        },
P粉949848849

Memandangkan anda menggunakan nama rujukan yang sama untuk setiap elemen dalam v-for anda, ini.$refs.cropper mungkin merupakan tatasusunan. Ini juga bergantung pada versi Vue anda. Jika ini berlaku, anda mungkin perlu menghantar hujah kepada fungsi keratan anda supaya indeks elemen panggilan diketahui dan getResult boleh dipanggil dengan betul.

Cuba log masuk konsol ini.$refs. Lihat juga sama ada benang ini berguna? Rujukan Vue.js di dalam gelung v-untuk p>

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan