我有一個 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粉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'); } },
P粉9498488492023-12-15 11:41:50
考慮到您對 v-for 中的每個元素使用相同的引用名稱, this.$refs.cropper 可能是一個陣列。這也取決於您的 Vue 版本。如果是這種情況,您可能必須將參數傳遞給您的裁剪函數,以便知道呼叫元素的索引並可以正確呼叫 getResult。
嘗試控制台記錄 this.$refs。 也可以看看這個線程是否有用? v-for 迴圈內的 Vue.js 參考 p>