Блог

Форма

 <h2 class="uk-modal-title">Change Profile Picture</h2><br>
    <form action="{{url_for('upload_dp', username=username)}}" method="POST" enctype="multipart/form-data">
    <input type="file" accept="image/*" placeholder="Upload profile picture" onchange="loadFile(event)" id="uploaded" required>

    <img id="dp">                
    <button onclick="beforeSubmit()">Upload</button>
  

Javascript

 var cropper;

function loadFile(image) {
    var dp = document.getElementById('dp');
    dp.src = URL.createObjectURL(image.target.files[0]);
    dp.onload = function() { URL.revokeObjectURL(dp.src)};
    cropper = new Cropper(dp, { aspectRatio: 1 });
}

function beforeSubmit() {
    cropper.getCroppedCanvas().toBlob((blob) => {
        var formData = new FormData();
        formData.append("dp", blob);
        formData.append('username', '{{username|safe}}');
        var xhr = new XMLHttpRequest;
        xhr.open( "POST", "/upload_dp");
        xhr.setRequestHeader('Content-Type', 'multipart/form-data');
        xhr.send(formData);
    }, "image/jpeg");
}
  

Когда изображение загружается, оно отображается, и на нем появляется обрезка. Пока все работает нормально.

Пользователь изменяет программу обрезки в соответствии со своими потребностями и при нажатии кнопки «Загрузить» запускает функцию beforeSubmit, в которой заключается проблема. Я не получаю никаких файлов в приложении flask. Приведенный ниже запрос имеет непустой поток, и я получаю аргумент username, но файл dp, содержащий обрезанное изображение в виде большого двоичного объекта, не получен! Пожалуйста, помогите.

 print(request.__dict__)
  

Является ли stream файлом большого двоичного объекта? Как xmlhttprequest с файлами отображается в flask?