JavaScript分片多文件上传仅首个成功、执行中断问题求助

核心问题点 #

• 分片递归调用uploadFile时未关联Promise链：当存在未上传分片时，你直接调用self.uploadFile()触发下一次分片上传，但没有将递归返回的Promise和当前层的Promise绑定，导致首次调用uploadFile返回的Promise始终处于pending状态，await一直阻塞，for循环无法进入下一个文件的处理。
• 错误场景未触发reject：fetch的catch分支仅打印错误，没有调用Promise的reject方法，请求异常时也会导致Promise永久pending，程序卡住。
• 冗余代码拼写错误：FileReader的onLoad事件名应为全小写onload，且你实际上传用的是原始filePart对象，这段FileReader代码完全冗余可直接删除。

修复方案 #

调整uploadFile内的递归逻辑，将下一次分片的Promise和当前Promise链串联，同时补全错误场景的reject逻辑：

uploadFile(start,file) {
    return new Promise((resolve, reject) => {
        this.#next_slice = start + this.#slice_size + 1;
        let filePart = file.slice(start, this.#next_slice, this.#file_type);
        const self = this;

        fetch('../processFileUploadTEST.php', {
            method: 'POST',
            body: filePart
        }).then(response => {
            if (!response.ok) {
                throw new Error(response.statusText);
            }
            return response.text(); // 若需要读取后端返回内容可保留该行
        }).then(data => {
            var size_done = start + self.#slice_size;
            var percent_done = Math.floor(((size_done) / self.#file_size) * 100) + 1;
            let total_percent_done = Math.floor(((size_done) / self.#total_file_size) * 100) + 1;

            if (self.#next_slice < self.#file_size) {
                uploadStatusDiv.innerHTML = `Uploading: ${percent_done}`;
                // 关键修改：把下一次分片的Promise和当前Promise串联
                resolve(self.uploadFile(self.#next_slice, file));
            } else {
                console.log("file " + self.#filename + " has been uploaded!");
                resolve("上传成功");
            }
            overallUploadStatusDiv.innerHTML = `Total upload progress:   ${total_percent_done} %`;
        }).catch(error => {
            console.log(error);
            // 关键修改：错误场景触发reject，避免Promise卡住
            reject(error);
        });
    })
}

其他优化建议 #

你用类私有属性存储当前文件的#file_size/#filename等状态，仅在当前串行上传的场景下可用，如果后续要改并发上传会出现状态覆盖问题，建议改为把这些参数直接传递给uploadFile方法，避免共享状态带来的bug。

内容的提问来源于stack exchange，提问作者JohnnyBoy