Question

我有一个Vue应用程序表单，其中包含图像上传器。它具有子组件，该组件具有从ant-design上传上传图片后裁剪图片的功能。在上传和裁剪过程中正常工作。问题是仅在用户firstime上传图像时才起作用。但是在第二次上传图像时，裁剪画布仍使用需要裁剪的第一张图像。因此，我使用this.cropper.destroy()销毁了已关闭或保存的函数，虽然可以正常工作，但仍然存在以下错误：第二次上传将使用第一张图片，第三次上传将使用第二张图片，第四次上传将使用第三张图片图片等等。如果此错误仍然存在，它将没有用户友好性。这里我展示了我的子组件代码，我希望它在组件销毁时被完全销毁。

<template>
<div>
    <a-row :gutter="16">
        <a-col :span="12">
            <img ref="image" :src="initialImage">
        </a-col>
        <a-col :span="12" align="center">
            <p><strong>Preview</strong></p>
            <img :src="updatedImage" class="preview-image">
        </a-col>
    </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: {},
      image: {},
      initialImage: this.uploadedImage,
    };
  },
  methods: {
    crop() {
      this.$emit('update-image', this.updatedImage);
      this.cropper.destroy();
    },
    cancel() {
      this.$emit('cancel-upload');
      this.cropper.destroy();
    },
    cropImage() {
      this.image = this.$refs.image;
      this.cropper = new Cropper(this.image, {
        zoomable: false,
        scalable: false,
        aspectRatio: 1,
        crop: () => {
          const canvas = this.cropper.getCroppedCanvas();
          this.updatedImage = canvas.toDataURL('image/png');
        },
      });
    },
  },
  watch: {
    uploadedImage() {
      this.initialImage = this.uploadedImage;
      this.cropImage();
    },
  },
  mounted() {
    this.cropImage();
  },
};
</script>

<style scoped>
  .preview-image {
    border-radius:100px;
    width:150px;
    height:150px;
  }
</style>

此this.cropper在页面关闭时完全销毁实际上需要做什么？或者我能做些什么来克服这个问题？

Answer 1

  watch: {
    uploadedImage() {
      this.initialImage = this.uploadedImage;
      this.cropper.destroy(); //==> use destroy function here
      this.cropImage();
    },
  },

Answer 2

我没有销毁cropper，而是用v-if销毁了整个子组件，所以当点击按钮时，它会重新安装组件

如何完全关闭关闭的组件上的功能？

2 个答案: