添加新照片时 vue-cropperjs 不刷新答案

【问题标题】：vue-cropperjs is not refreshing when adding new photo添加新照片时 vue-cropperjs 不刷新
【发布时间】：2023-01-13 08:46:11
【问题描述】：

我正在使用此输入添加新图像

<input type="file" id="profile_photo_add" ref="profile_photo_add" @change="createProfilePhotoPreviewInAdd"/>

<vue-cropper 
                v-if="urlProfilePreviewAdd"
                ref="cropperAdd" 
                :src="urlProfilePreviewAdd"
                alt="Source Image" 
                :aspectRatio="16/9"
                :initialAspectRatio="16/9" 
                :autoCropArea="1"
                :zoomable="false"/>

以及这种为 cropper 创建对象 url 的方法

createProfilePhotoPreviewInAdd(e)
    {
      this.urlProfilePreviewAdd = URL.createObjectURL(e.target.files[0]);
      console.log(this.urlProfilePreviewAdd)
      console.log(this.$refs.cropperAdd)
    }

第一次上传图片时，剪裁器会显示该图像，如果我尝试上传其他图像，剪裁器不会刷新。如果我 console.log cropper ref 和 urlProfilePreviewAdd 我看到 urlProfilePreviewAdd 正在更改，但 cropper ref 目标与第一次保持相同。如何实时更新输入，裁剪器呢？ SS for console.logs

在这里也查看 ss for console.logs。

【问题讨论】：

这可能是因为我没有创建 vue-cropperjs 的新实例并且仍然使用相同的实例，但问题是如何创建一个新实例并在它现在所在的特定 div 中使用它？

标签： vue.js

【解决方案1】：

您必须按照 documentation 中所述在 cropper 实例上调用 replace 函数

替换图像的 src 并重建裁剪器。

setImage(e) {
  this.urlProfilePreviewAdd = URL.createObjectURL(e.target.files[0]);
  this.$refs.cropper.replace(this.urlProfilePreviewAdd);
},

【讨论】：