Remove event listeners when destory ImageCropper

src/components/image_cropper/image_cropper.js

@@ -65,29 +65,43 @@ const ImageCropper = {
     },
     createCropper () {
       this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
+    },
+    getTriggerDOM () {
+      return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+    },
+    readFile () {
+      const fileInput = this.$refs.input
+      if (fileInput.files != null && fileInput.files[0] != null) {
+        let reader = new FileReader()
+        reader.onload = (e) => {
+          this.dataUrl = e.target.result
+        }
+        reader.readAsDataURL(fileInput.files[0])
+        this.filename = fileInput.files[0].name || 'unknown'
+        this.$emit('changed', fileInput.files[0], reader)
+      }
     }
   },
   mounted () {
     // listen for click event on trigger
-    let trigger = typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+    const trigger = this.getTriggerDOM()
     if (!trigger) {
       this.$emit('error', 'No image make trigger found.', 'user')
     } else {
       trigger.addEventListener('click', this.pickImage)
     }
     // listen for input file changes
-    let fileInput = this.$refs.input
+    const fileInput = this.$refs.input
-    fileInput.addEventListener('change', () => {
+    fileInput.addEventListener('change', this.readFile)
-      if (fileInput.files != null && fileInput.files[0] != null) {
+  },
-        let reader = new FileReader()
+  beforeDestroy: function () {
-        reader.onload = (e) => {
+    // remove the event listeners
-          this.dataUrl = e.target.result
+    const trigger = this.getTriggerDOM()
-        }
+    if (trigger) {
-        reader.readAsDataURL(fileInput.files[0])
+      trigger.removeEventListener('click', this.pickImage)
-        this.filename = fileInput.files[0].name || 'unknown'
+    }
-        this.$emit('changed', fileInput.files[0], reader)
+    const fileInput = this.$refs.input
-      }
+    fileInput.removeEventListener('change', this.readFile)
-    })
   }
 }