我有一個 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 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"
一切正常，直到我到達裁剪函式，它顯示以下內容：
Uncaught TypeError: this.$refs.cropper.getResult is not a function
我的第一個想法是，它可能與回圈多個影像有關，但它也不適用于 juse one。我嘗試將光碟中的部分合并并從這里上傳到服務器： https ://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server
- - 編輯 - -
我也有匯出默認值，并且裁剪作業，只是沒有得到結果：
export default {
components: {
Cropper,
},
uj5u.com熱心網友回復：
考慮到您對 v-for 中的每個元素使用相同的參考名稱，這可能是 this.$refs.cropper 是一個陣列。這也取決于您的 Vue 版本。如果是這種情況，您可能必須將引數傳遞給您的裁剪函式，以便知道呼叫元素的索引并且可以正確呼叫 getResult。
嘗試控制臺記錄 this.$refs。也可以看看這個執行緒是否有用？ v-for 回圈中的 Vue.js ref
uj5u.com熱心網友回復：
aleksKamb 有正確的解決方案。應用索引后，它似乎正在作業。我將 v-for 編輯為：
<div v-for="(image, index) 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(index)">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>
然后我將裁剪功能編輯為：
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');
}
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481870.html
標籤：javascript Vue.js
下一篇：vuex在組件函式中調度動作