JavaScript中利用Async/Await实现图片上传顺序控制的教程
时间：2025-12-22 09:57:16 366浏览 收藏
怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《JavaScript中利用Async/Await实现图片上传顺序控制的教程 》，涉及到，有需要的可以收藏一下
本文旨在详细指导如何在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语法。
- 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 += `<img src="${base64Str}" class="img-thumbnail m-2 product_photo_${id}_base64" style="height: 50px;" />`;
} 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 += `<img src="${base64Str}" class="img-thumbnail m-2 product_photo_${id}_base64" style="height: 50px;" />`;
} 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 <= files.length，这会导致尝试访问 files[files.length]，其值为 undefined。正确的循环条件应该是 index < files.length，因为数组的索引是从0到 length - 1。在示例代码中已修正。
- 资源清理：对于 FileReader 和 Image 等DOM或浏览器API，通常不需要显式清理。它们在作用域结束后或不再被引用时会被垃圾回收。
总结
通过将基于回调的异步操作封装成Promise，并结合 async/await 语法，我们能够以同步代码的风格编写异步逻辑，从而极大地提高了代码的可读性和可维护性。对于多文件上传这类需要严格控制执行顺序的场景，async/await 提供了一种优雅且强大的解决方案，确保文件按照用户预期进行处理和显示。理解并熟练运用这些现代JavaScript特性，是构建健壮、高效前端应用的关键。
以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。
相关阅读
更多>
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读
更多>
-
377 收藏
-
338 收藏
-
486 收藏
-
322 收藏
-
132 收藏
-
368 收藏
-
413 收藏
-
172 收藏
-
135 收藏
-
298 收藏
-
156 收藏
-
206 收藏
课程推荐
更多>
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 立即学习 485次学习