Tengo una función de recorte para Vue Advanced Cropper como esta:
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; } },Mi 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>He incluido la importación para Cropper:
import {Cropper} from 'vue-advanced-cropper'Versión de paquete.json:
"vue-advanced-cropper": "^2.8.1" Todo funciona hasta que llego a la función de recorte donde dice lo siguiente:
TypeError no detectado: this.$refs.cropper.getResult no es una función
Lo primero que pensé fue que podría tener algo que ver con el bucle de varias imágenes, sin embargo, tampoco funciona con una sola. Intenté combinar la parte del disco y subirla al servidor desde aquí: https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server
--- Editar ---
También tengo la exportación predeterminada, y el recorte funciona, simplemente no obtengo los resultados:
export default { components: { Cropper, },Teniendo en cuenta que está utilizando el mismo nombre de referencia para cada elemento en su v-for, es posible que this.$refs.cropper sea una matriz. Esto también depende de su versión de Vue. Si ese es el caso, es posible que deba pasar un parámetro a su función de recorte para que se conozca el índice del elemento que invoca y se pueda llamar correctamente a getResult.
Intente registrar esto en la consola. $ refs. También tal vez ver si este hilo es útil? Vue.js ref dentro del bucle v-for
aleksKamb tenía la solución correcta. Después de aplicar índices, parece estar funcionando. Edité el v-for para:
<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>Y luego edité la función de recorte para:
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'); } },