表格
<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?