未捕获的类型错误：无法在cropper.js 中读取null 的属性“removeChild”

编程问答 2022-05-02

问题描述

const bannerInput = document.getElementById('id_edit_banner');
const avatarInput = document.getElementById('id_avatar');

function uploadPhoto(uploadElem) {

    let blobUrl = URL.createObjectURL(uploadElem.files[0]);
    $('#drag-image').attr('src',blobUrl);
    $('#drag-image').on('load',(e) => {
        initCropper();
    });
}


$(document).on('change','#id_avatar',e => {
    uploadPhoto(avatarInput)
});

function initCropper() {
    var image = document.getElementById('drag-image');

    // error occurs here
    if (image.classList.contains("cropper-hidden")) {
        image.src = "";
        image.cropper.destroy();
    }

    var cropper = new Cropper(image,{
        aspectRatio: 1 / 1,});

    // On crop button clicked
    document.getElementById('crop-submit').addEventListener('click',function () {
        $('.update-img-container').addClass('d-none');
        cropper.getCroppedCanvas().toBlob(function (blob) {
            var formData = new FormData();
            formData.append('avatar',blob,'avatar.jpg');
            formData.append('csrfmiddlewaretoken',$('input[name=csrfmiddlewaretoken]').val());
            $('.cropper-container').remove();
            $.ajax({
                url: `/update-avatar/`,method: "POST",data: formData,processData: false,contentType: false,success: function () {
                },error: function () {
                }
            });
        });
    });
}

我收到一个错误 - 未捕获的类型错误：无法读取 null 的属性“removeChild” 关于运行 destroy 方法。

这只会在第二次上传时发生。

我该如何解决这个问题？

谢谢

感谢任何帮助

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cropperjsimageimagejavascript