搜尋

首頁  >  問答  >  主體

Vue - 高級 Cropper(未捕獲類型錯誤:this.$refs.cropper.getResult 不是函數)

我有一個 Vue Advanced Cropper 的裁剪功能,如下所示:

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:

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

我已經包含了 Cropper 的導入:

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

package.json 中的版本:

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

一切正常,直到我到達裁剪功能,其中顯示以下內容:

# 未捕獲類型錯誤:this.$refs.cropper.getResult不是函數

我的第一個想法是,它可能與循環多個圖像有關,但是它也不適用於僅一個圖像。我嘗試將光碟中的部分組合起來並從這裡上傳到伺服器: https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

--- 編輯 ---

我也有匯出預設值,並且裁切有效,只是沒有得到結果:

export default {

    components: {
        Cropper,
    },


#
P粉054616867P粉054616867356 天前541

全部回覆(2)我來回復

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

    回覆
    0
  • P粉949848849

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

    考慮到您對 v-for 中的每個元素使用相同的引用名稱, this.$refs.cropper 可能是一個陣列。這也取決於您的 Vue 版本。如果是這種情況,您可能必須將參數傳遞給您的裁剪函數,以便知道呼叫元素的索引並可以正確呼叫 getResult。

    嘗試控制台記錄 this.$refs。 也可以看看這個線程是否有用? v-for 迴圈內的 Vue.js 參考

    回覆
    0
  • 取消回覆