我在使用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循环停留在当前的第一次迭代中。
有人能看出我做错了什么吗?我正在附上输出的新图片。谢谢
代码编辑后的控制台输出:
2条答案
按热度按时间9o685dep1#
fetch在报告上传/下载进度方面做得不好,这是xhr比fetch更擅长的一件事。
oewdyzsn2#
在修改了代码并做了进一步的研究之后,我决定使用uppy…他们几乎已经实现了我所需要的。