Tentei encontrar uma resposta no StackOverflow e até procurei em outro lugar na Internet, mas não tive sorte. Estou tentando há alguns dias, sem sucesso.
Eu só preciso atrasar meu forEach
até que XMLHttpRequest
seja concluído para cada arquivo, com base no meu código abaixo. Desde já, obrigado..
function handleFiles(files,i) {
files = [...files]
files.forEach(uploadFile)
}
function uploadFile(file, i) {
var Url_imageAdd = "mytargetUrl...."
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', Url_imageAdd, true)
xhr.upload.addEventListener("progress", function(e) {
updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
})
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('lConfirm').innerHTML="Files uploaded...."
urlCount = parseInt($('#urlCount').val())
$('#urlCount').val(urlCount+filescount)
var imageSet = JSON.parse(xhr.responseText)
} else if (xhr.readyState == 4 && xhr.status != 200) {
alert("Upload Error....")
window.location.reload();
}
})
formData.append('img_file', file)
formData.append('title',"mytitle")
xhr.send(formData)
}
Se sua uploadFile
função retornar uma promessa, você poderá usar await
ou um .then(...)
retorno de chamada com Promise.all
:
function uploadFile(file, i) {
return new Promise((resolve, reject) => {
var Url_imageAdd = "mytargetUrl...."
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', Url_imageAdd, true)
xhr.upload.addEventListener("progress", function(e) {
updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
})
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('lConfirm').innerHTML="Files uploaded...."
urlCount = parseInt($('#urlCount').val())
$('#urlCount').val(urlCount+filescount)
var imageSet = JSON.parse(xhr.responseText)
resolve(imageSet)
} else if (xhr.readyState == 4 && xhr.status != 200) {
reject(new Error("Upload Error...."))
}
})
formData.append('img_file', file)
formData.append('title',"mytitle")
xhr.send(formData)
});
}
Agora você pode fazer isso:
async function handleFiles(files,i) {
files = [...files]
try {
await Promise.all(files.map(uploadFile));
// We've finished
} catch (err) {
alert('Upload failed!');
window.location.reload();
}
}
Ou se você quiser executá-los em série em vez de em paralelo, com um atraso de 2 segundos entre:
function delay(milliseconds) {
return new Promise(resolve => {
setTimeout(resolve, milliseconds);
});
}
async function handleFiles(files,i) {
files = [...files]
for (let i = 0; i < files.length; i++) {
try {
await delay(2000);
await uploadFile(files[i], i);
} catch (err) {
alert('Upload failed!');
window.location.reload();
}
}
// We've finished
}
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras