本文旨在详细指导如何在javascript中利用async/await语法和promise机制，确保多文件上传时按照用户选择的顺序进行处理。我们将深入探讨如何将基于回调的异步操作（如filereader和image加载）转换为可被await的promise，并通过在循环中使用await关键字，实现对异步上传流程的精确顺序控制，从而有效解决因文件大小或网络延迟导致的文件乱序问题。
理解异步上传中的顺序问题
在前端开发中，处理文件上传，特别是多文件上传，常常会遇到一个常见问题：上传的文件顺序与用户选择的顺序不一致。这通常是由于文件处理（如读取、压缩、上传）是异步操作，并且这些操作的完成时间取决于多种因素，例如文件大小、网络状况或处理复杂性。当我们在一个循环中触发多个异步任务，但没有明确等待它们完成时，javaScript会继续执行下一个循环迭代，导致这些任务以不确定的顺序完成。
例如，在原始的代码片段中：
document.getElementById("product_photo_1").addEventListener("change", (event) => { let files = document.getElementById("product_photo_1").files; for(let index = 0; index <= files.Length; index++) { // 注意：此处循环条件应为 index < files.length uploadImage(files[index], 1); // uploadImage 是异步函数，但此处没有等待其完成 } });uploadImage 函数内部包含了 FileReader.onload 和 Image.onload 等异步回调，但 for 循环在调用 uploadImage 后并不会暂停等待其内部的异步操作完成。因此，所有 uploadImage 调用几乎是同时开始执行的，最终导致图片处理和显示顺序不确定。尝试直接在循环中使用 await uploadImage(…) 会报错 await is only valid in async functions and the top level bodies of modules，这是因为 await 关键字只能在用 async 声明的函数内部使用。
Async/Await与Promise基础
要解决上述问题，我们需要利用javascript的async/await语法。
立即学习“Java免费学习笔记（深入）”；
- async 关键字：用于声明一个函数是异步函数。异步函数总是返回一个Promise。如果函数内部没有明确返回Promise，它会隐式地将返回值包装在一个已解决的Promise中。
- await 关键字：只能在 async 函数内部使用。它会暂停 async 函数的执行，直到其后面的Promise解决（fulfilled）或拒绝（rejected）。一旦Promise解决，await 表达式就会返回Promise的解决值；如果Promise被拒绝，await 表达式会抛出错误。
await 能够“等待”的本质是它与Promise的紧密结合。因此，任何需要被 await 的异步操作，都必须能够返回一个Promise。对于基于回调的异步API（如FileReader.onload、Image.onload），我们需要手动将其封装成Promise。
重构 uploadImage 函数以返回 Promise
原始的 uploadImage 函数虽然内部包含异步操作，但它并没有返回一个Promise，因此无法直接被 await。为了使其能够被 await，我们需要将其改造为一个返回Promise的函数。
我们将使用 new Promise() 构造函数来封装 FileReader 和 Image 的加载过程。当文件和图片成功加载并处理完毕后，调用 resolve 来解决Promise，并传递处理后的 base64Str；如果发生错误，则调用 reject。
以下是重构后的 uploadImage 函数：
const uploadImage = (file, id) => { if (!file) { // 如果没有提供文件，直接拒绝Promise return Promise.reject(new Error('未提供文件')); } // 返回一个新的Promise，封装异步操作 return new Promise((resolve, reject) => { const fileReader = new FileReader(); // 监听文件读取错误 fileReader.onerror = () => { reject(new Error('文件读取失败')); }; // 文件读取成功后执行 fileReader.onload = () => { let img = new Image(); img.src = fileReader.result; // 监听图片加载错误 img.onerror = () => { reject(new Error('图片加载失败')); }; // 图片加载成功后执行 img.onload = () => { let canvas = document.createElement("canvas"); const MAX_WIDTH = 1000; const MAX_HEIGHT = 1500; let width = img.width; let height = img.height; // 根据最大宽高调整图片尺寸 if (width > height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT; } } canvas.width = width; canvas.height = height; let ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); const base64Str = canvas.toDataURL("image/jpeg", 90); // 根据id将图片显示到dom中 if (id) { const resultElement = document.getElementById("product_photo_" + id + "_result"); if (resultElement) { resultElement.innerhtml += `@@##@@`; } else { console.warn(`未找到ID为 product_photo_${id}_result 的元素。`); } } // 解决Promise，返回base64字符串 resolve(base64Str); }; }; // 开始读取文件 fileReader.readAsDataURL(file); }); };在上述代码中：
- uploadImage 函数现在返回一个 new Promise。
- fileReader.onload 和 img.onload 回调中的逻辑被封装在Promise的执行器函数中。
- 当图片处理完成后，调用 resolve(base64Str) 来解决Promise，并将处理后的图片数据传递出去。
- 增加了 onerror 处理，当文件读取或图片加载失败时，调用 reject 来拒绝Promise。
在事件监听器中应用 Async/Await 实现顺序上传
现在 uploadImage 函数已经返回一个Promise，我们就可以在事件监听器中使用 async/await 来确保图片按顺序上传。
首先，需要将事件监听器的回调函数标记为 async。然后，在循环内部，对 uploadImage 的调用前加上 await 关键字。这将确保每次循环迭代都会等待当前的 uploadImage 操作完成后，再进行下一次迭代。
document.getElementById("product_photo_1").addEventListener("change", async (event) => { let files = event.target.files; // 获取文件列表，更推荐使用 event.target.files // 循环条件修正为 index < files.length for(let index = 0; index < files.length; index++) { try { // await 会暂停循环，直到当前的 uploadImage Promise 解决或拒绝 const base64Image = await uploadImage(files[index], 1); console.log(`图片 ${index + 1} 上传并处理完成。`); // 可以在此处对 base64Image 进行进一步操作，例如发送到服务器 } catch (error) { console.error(`图片 ${index + 1} 处理失败:`, error); // 可以在此处显示错误信息给用户 } } console.log('所有图片处理完成。'); }); // 如果有多个文件输入，可以为每个添加类似的 async 事件监听器 document.getElementById("product_photo_2").addEventListener("change", async (event) => { let files = event.target.files; for(let index = 0; index < files.length; index++) { try { await uploadImage(files[index], 2); console.log(`图片 ${index + 1} 上传并处理完成。`); } catch (error) { console.error(`图片 ${index + 1} 处理失败:`, error); } } console.log('所有图片处理完成。'); });通过上述修改，当用户选择多个文件后，for 循环中的 await uploadImage(files[index], 1) 会确保：
- 第一个文件开始处理。
- async 函数暂停，等待第一个文件的Promise解决。
- 第一个文件处理完成后，await 表达式返回结果，async 函数恢复执行。
- 循环进入下一个迭代，第二个文件开始处理，并再次暂停等待。 这个过程会一直持续，直到所有文件都按照选择的顺序依次处理完毕。
完整示例代码
为了提供一个可运行的完整示例，我们需要一个简单的HTML结构来承载文件输入和图片显示区域。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>顺序图片上传教程</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .img-thumbnail { height: 50px; margin: 5px; border: 1px solid #ddd; padding: 2px; background-color: #fff; } .container { margin-top: 20px; } </style> </head> <body> <div class="container"> <h1>顺序图片上传示例</h1> <div class="mb-3"> <label for="product_photo_1" class="form-label">上传产品图片 (组 1)</label> <input type="file" class="form-control" id="product_photo_1" multiple accept="image/*"> <div id="product_photo_1_result" class="mt-2 border p-2 rounded"> <p>图片将在此处按顺序显示:</p> </div> </div> <div class="mb-3"> <label for="product_photo_2" class="form-label">上传产品图片 (组 2)</label> <input type="file" class="form-control" id="product_photo_2" multiple accept="image/*"> <div id="product_photo_2_result" class="mt-2 border p-2 rounded"> <p>图片将在此处按顺序显示:</p> </div> </div> </div> <script> const uploadImage = (file, id) => { if (!file) { return Promise.reject(new Error('未提供文件')); } return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onerror = () => { reject(new Error('文件读取失败')); }; fileReader.onload = () => { let img = new Image(); img.src = fileReader.result; img.onerror = () => { reject(new Error('图片加载失败')); }; img.onload = () => { let canvas = document.createElement("canvas"); const MAX_WIDTH = 1000; const MAX_HEIGHT = 1500; let width = img.width; let height = img.height; if (width > height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT; } } canvas.width = width; canvas.height = height; let ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); const base64Str = canvas.toDataURL("image/jpeg", 90); if (id) { const resultElement = document.getElementById("product_photo_" + id + "_result"); if (resultElement) { resultElement.innerHTML += `@@##@@`; } else { console.warn(`未找到ID为 product_photo_${id}_result 的元素。`); } } resolve(base64Str); }; }; fileReader.readAsDataURL(file); }); }; document.getElementById("product_photo_1").addEventListener("change", async (event) => { let files = event.target.files; if (!files || files.length === 0) return; // 清空之前的显示结果 document.getElementById("product_photo_1_result").innerHTML = '<p>图片将在此处按顺序显示:</p>'; for(let index = 0; index < files.length; index++) { try { console.log(`开始处理组1的第 ${index + 1} 张图片...`); await uploadImage(files[index], 1); console.log(`组1的第 ${index + 1} 张图片处理完成。`); } catch (error) { console.error(`组1的第 ${index + 1} 张图片处理失败:`, error); } } console.log('组1所有图片处理完成。'); }); document.getElementById("product_photo_2").addEventListener("change", async (event) => { let files = event.target.files; if (!files || files.length === 0) return; // 清空之前的显示结果 document.getElementById("product_photo_2_result").innerHTML = '<p>图片将在此处按顺序显示:</p>'; for(let index = 0; index < files.length; index++) { try { console.log(`开始处理组2的第 ${index + 1} 张图片...`); await uploadImage(files[index], 2); console.log(`组2的第 ${index + 1} 张图片处理完成。`); } catch (error) { console.error(`组2的第 ${index + 1} 张图片处理失败:`, error); } } console.log('组2所有图片处理完成。'); }); </script> </body> </html>注意事项与最佳实践
- 错误处理：在 async 函数中使用 await 时，如果被 await 的Promise被拒绝，await 会抛出一个错误。因此，强烈建议使用 try…catch 块来捕获并处理这些错误，以防止程序崩溃或提供友好的用户反馈。
- ui反馈：由于 await 会暂停执行，对于长时间运行的操作（如大文件上传），用户界面可能会显得无响应。在异步操作开始前显示加载指示器，并在操作完成后隐藏它，能够显著提升用户体验。
- 并行上传 vs 顺序上传：本教程侧重于顺序上传。如果业务需求允许并行处理多个文件以提高效率，可以使用 Promise.all()。Promise.all() 接收一个Promise数组，并在所有Promise都解决后返回一个包含所有解决值的数组。例如：
// 并行处理所有图片 const allUploadPromises = Array.from(files).map(file => uploadImage(file, id)); try { const results = await Promise.all(allUploadPromises); console.log('所有图片并行处理完成:', results); } catch (error) { console.error('部分图片并行处理失败:', error); }选择顺序还是并行取决于具体场景：顺序上传适用于严格要求顺序的场景（如图片排序），而并行上传则适用于对顺序无要求但追求效率的场景。
- 循环条件：在原始代码中，for 循环的条件是 index
- 资源清理：对于 FileReader 和 Image 等DOM或浏览器API，通常不需要显式清理。它们在作用域结束后或不再被引用时会被垃圾回收。
总结
通过将基于回调的异步操作封装成Promise，并结合 async/await 语法，我们能够以同步代码的风格编写异步逻辑，从而极大地提高了代码的可读性和可维护性。对于多文件上传这类需要严格控制执行顺序的场景，async/await 提供了一种优雅且强大的解决方案，确保文件按照用户预期进行处理和显示。理解并熟练运用这些现代JavaScript特性，是构建健壮、高效前端应用的关键。