Cropper第二次不初始化

Question

我的程序第一次启动时一切正常，但是当我选择另一个带有文件输入的本地图片时，Cropper无法正常工作。我在做什么错了？

JS：

const f: ({ a }?: { a?: number | undefined }) => number =
    ({ a = 0 } = {}) => a;
//     ^
//     \-- Property 'a' does not exist on type '{ a?: number | undefined; } | undefined'

HTML：

(function($) {
    let avatar = {
        init: function(config) {
            $this = this;
            this.config = config;
            this.loadCropper()
            this.bindEvents();
        },
        bindEvents: function() {
            $this = this;
            this.config.file.change(this.configPreview);

        },
        configPreview: function() {
            $this.destractorCropper()
            $this.file = this.files[0];
            let reader = new FileReader();
            reader.onload = () => $this.config.preview.attr('src', reader.result);
            reader.readAsDataURL($this.file);
            $this.loadCropper();
        },
        loadCropper: function() {
            this.config.preview.cropper({
                aspectRatio: 1,
            });

            // Get the Cropper.js instance after initialized
            this.cropper = this.config.preview.data('cropper');
        },
        destractorCropper: function() {
            $this.cropper.destroy();
            $this.cropper = null;
        }
    };

    avatar.init({
        file: $('.file'),
        preview: $('#preview')
    });
})(jQuery)