如何使用“ blob：http” URL上传多张图片？

Question

前端页面上有多张图片，例如：

<img src="blob:https://test.com/b6146956-6e52-436d-1111-f3f1b81ae461" />
<img src="blob:https://test.com/b6146956-6e52-436d-2222-f3f1b81ae461" />
<img src="blob:https://test.com/b6146956-6e52-436d-3333-f3f1b81ae461" />

我想通过使用Ajax中的FormData将三个图像上传到服务器。 而且我找到了一种获取blob对象的方法：

function getBlobObject(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function (e) {
        if (this.status == 200) {
            var blob = this.response;
            callback(blob);
        }
    };
    xhr.send();
}

但是函数中的onload是异步的。因此，我无法获取这三个blob对象，然后再发送ajax请求。

如何解决此问题？谢谢。