使用 Promise.map 排队文件上传

Question

第一组文件上传成功，但是刚上传完，并没有开始队列中的下一组文件。

为什么迭代在第一次设置后停止，我该如何解决这个问题？

解决方案不一定非得用Bluebird——我一开始就用它，因为我想，我会变得更容易。

function uploadFile(url, file, onProgress) {

    return new Promise((resolve, reject) => {

        const formData = new FormData();
        formData.append('file', file);

        const xhr = new XMLHttpRequest();

        xhr.open('POST', url);

        xhr.addEventListener('readyState', _ => {
            if (xhr.readyState === xhr.DONE) {
                resolve(file);
            }
        });

        xhr.addEventListener('error', _ => {
            reject(new Error());
        });

        xhr.upload.addEventListener('progress', event => {
            onProgress && onProgress(event.loaded / event.total);
        });

        xhr.send(formData);

    });

}

/* files is a FileList */
Promise.map(Array.from(files), file => {
    return uploadFile(location.href, file, null);
}, { concurrency: 2 });

Answer 1

事件类型称为 readystatechange（不是 readyState）。

正如 powerc9000 在评论中注意到的那样，Promise 没有得到解决，Promise.map 不知道什么时候继续。

使用 Promise.map 排队文件上传

Queueing file uploads with Promise.map

javascript

promise

bluebird