2

我有一个 vue 应用程序表单，其中包含 ant-design-vue 上传的图像上传器。我将此图像上传器链接到一个新组件，该组件在使用cropper.js 上传后处理要裁剪的图像。第一次作物一切都很好，工作完美。但是当用户第二次需要更换照片并再次裁剪时，裁剪区域上的图像仍然使用第一张图像。第三次上传将裁剪第二个区域，下一次将收到相同的影响。

这是我的代码的结构：

<template>
  <div>
    <a-row :gutter="16">
      <img ref="image" :src="initialImage">
    </a-row><br />
    <a-row :gutter="16">
      <a-button type="primary" style="float: right;" @click="crop">Crop</a-button>
      <a-button style="float: right; margin-right: 5px;" @click="cancel">Cancel</a-button>
    </a-row>
  </div>
</template>

这是脚本和样式：

<script>
import Cropper from 'cropperjs';

export default {
  name: 'PostCropper',
  props: {
    uploadedImage: String,
  },
  data() {
    return {
      cropper: {},
      updatedImage: {},
      initialImage: this.uploadedImage,
    };
  },
  methods: {
    crop() {
      this.$emit('update-image', this.updatedImage);
    },
    cancel() {
      this.$emit('cancel-upload');
    },
    cropImage() {
      this.cropper = new Cropper(this.$refs.image, {
        autoCropArea: 1,
        cropBoxResizable: false,
        zoomOnTouch: true,
        zoomable: true,
        scalable: false,
        aspectRatio: 1,
        resizable: false,
        crop: () => {
          const canvas = this.cropper.getCroppedCanvas();
          this.updatedImage = canvas.toDataURL('image/png');
        },
      });
    },
  },
  watch: {
    uploadedImage() {
      this.cropper.destroy();
      this.initialImage = this.uploadedImage;
      this.cropImage();
    },
  },
  mounted() {
    this.cropImage();
  },
};
</script>

<style lang="scss">

.cropper-crop-box .cropper-view-box {
    border-radius:50%;
  }
</style>

问题发生在这里：

          this.cropper = new Cropper(this.$refs.image, {
            autoCropArea: 1,
            cropBoxResizable: false,
            zoomOnTouch: true,
            zoomable: true,
            scalable: false,
            aspectRatio: 1,
            resizable: false,
            crop: () => {
              const canvas = this.cropper.getCroppedCanvas();
              this.updatedImage = canvas.toDataURL('image/png');
            },
          });

我已经破坏了 this.cropper 但仍然裁剪相同的图像。我试图通过 console.log 预览 this.cropper、this.image、this.initialImage、this.uploadedImage 的每个值，但它们都没有问题。它将在 this.uploadedImage 上携带新值，使用 vue watch 进行更改。我不知道为什么只有上面的这个函数仍然带有相同的图像。有什么方法可以初始化 this.cropper 或者可以克服我的问题的方法，比如重新渲染这个子组件？

4

2 回答 2

0

您可以通过给它们一个键并更新键来刷新 Vue 元素。例如，您在哪里导入 PostCropper 组件：

<PostCropper v-bind:key="refreshValue" />

然后在父元素的 data 属性中分配一个名为的属性refreshValue并给它一个像 1 这样的值。然后当你需要刷新组件时，你只需更改值。这可能需要您从PostCropper组件向父级发送一个事件，然后递增refreshValue.

于 2019-12-18T02:25:10.100 回答
0

我有另一种方法可以破坏父组件中的子组件，而不是破坏变量。通过使用 v-if 方法来销毁导入的组件，它可以完美地工作。

于 2019-12-18T07:26:15.327 回答