通过分块上传多个文件的问题,javascript

nbnkbykc  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(310)

我在使用javascript通过分块上传多个文件时遇到问题。对于一个文件,它似乎可以正常工作,但如果有多个文件,程序执行将停止,并且不会继续下一个文件上载。
我知道这很可能是async/await的问题。请让我知道我做错了什么。我希望发生的是:用户删除多个文件->文件1分块并读取->一旦完成->文件2分块并读取->等等。
以下是当前输出的屏幕截图:

您可以看到第一个文件已上载,但随后程序执行停止,而不是继续第二个文件。
下面是代码:函数,用于循环遍历所有文件:

/* loop through all files and upload to server */
async loopThroughFiles(){
        for (const file of this.#files) {
            this.#file = file;
            this.#file_size = file.size;
            this.#total_file_size = this.#total_file_size + file.size;
            this.#file_count++;
            this.#file_type = file.type;
            this.#filename = file.name;
            console.log("filename: " + this.#filename);

            try {
                const result = await this.uploadFile(0, file); // uses fetch to send file server side
                console.log("finished uploading " + file.name);
                overallUploadStatusDiv.insertAdjacentHTML('afterend', file.name + result + "<br/>");
            }catch(err){
                console.log(err);
            }
        }
}

函数以上载文件():

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);
    let fileReader = new FileReader();

    let self = this; // save object reference to use inside nested function
    fileReader.readAsDataURL(filePart);

    fileReader.onLoad = function (e) {
        return console.log("here is your data: " + e.target.result);
    };

    /**pass files in chunks to server**/
    //return new Promise((resolve, reject) => {
    fetch('../processFileUploadTEST.php', {
        method: 'POST',
        body: filePart
    }).then(response => {
        if (!response.ok) {
            throw new Error(response.statusText);
        }
    }).then(data => {
        //console.log("php data: " + 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;
        //console.log(self.#filename + " VS " + file.name);

        if (self.#next_slice < self.#file_size) {
            uploadStatusDiv.innerHTML = `Uploading: ${percent_done}`;
            self.uploadFile(self.#next_slice, file);
        } else {
            resolve(console.log("file " + self.#filename + " has been uploaded!"))
            //itemSpan[0].style.color = "blue";
        }
        overallUploadStatusDiv.innerHTML = `Total upload progress:   ${total_percent_done} %`;
    }).catch(error => console.log(error));

    }) // end Promise
} // end uploadFile function

}//结束类
任何正确方向的帮助/指示都将不胜感激!
编辑:我修改了代码以正确使用async/await。代码现在工作得更像它应该的样子,只是它没有迭代下一个文件。它在第一个文件之后被卡住。似乎uploadfile()函数从未返回承诺,导致for循环停留在当前的第一次迭代中。
有人能看出我做错了什么吗?我正在附上输出的新图片。谢谢
代码编辑后的控制台输出:

9o685dep

9o685dep1#

fetch在报告上传/下载进度方面做得不好,这是xhr比fetch更擅长的一件事。

const xhr = new XMLHttpRequest()
xhr.upload.onprogress = console.log
xhr.onprogress = console.log
xhr.open('POST', 'https://httpbin.org/post')
xhr.send(new File(['abc'], 'sample.txt'))
oewdyzsn

oewdyzsn2#

在修改了代码并做了进一步的研究之后,我决定使用uppy…他们几乎已经实现了我所需要的。

相关问题