将带有xmlhttprequest的裁剪图像Blob发送到Flask服务器

问题描述

表格

<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，但是未接收到以blob裁剪图像的文件dp！请帮忙。

print(request.__dict__)

是否正在流blob文件？烧瓶中如何显示带有文件的xmlhttprequest？

解决方法

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

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

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

ajax cropperjs flask javascript