JavaScript中利用Async/Await实现图片上传顺序控制的教程-js教程-PHP中文网

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语法。

立即学习“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 来确保图片按顺序上传。

CA.LA

第一款时尚产品在线设计平台，服装设计系统

查看详情

首先，需要将事件监听器的回调函数标记为 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特性，是构建健壮、高效前端应用的关键。