怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面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 += ``;
                    } else {
                        console.warn(`未找到ID为 product_photo_${id}_result 的元素。`);
                    }
                }
                // 解决Promise，返回base64字符串
                resolve(base64Str);
            };
        };

        // 开始读取文件
        fileReader.readAsDataURL(file);
    });
};

在上述代码中：

1. uploadImage 函数现在返回一个 new Promise。
2. fileReader.onload 和 img.onload 回调中的逻辑被封装在Promise的执行器函数中。
3. 当图片处理完成后，调用 resolve(base64Str) 来解决Promise，并将处理后的图片数据传递出去。
4. 增加了 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) 会确保：

1. 第一个文件开始处理。
2. async 函数暂停，等待第一个文件的Promise解决。
3. 第一个文件处理完成后，await 表达式返回结果，async 函数恢复执行。
4. 循环进入下一个迭代，第二个文件开始处理，并再次暂停等待。 这个过程会一直持续，直到所有文件都按照选择的顺序依次处理完毕。

完整示例代码

为了提供一个可运行的完整示例，我们需要一个简单的HTML结构来承载文件输入和图片显示区域。

    
    
    
    
    


    

        
顺序图片上传示例

        

            上传产品图片 (组 1)
            
            

                
图片将在此处按顺序显示:
            
        

        

            上传产品图片 (组 2)
            
            

                
图片将在此处按顺序显示:
            
        
    

    

注意事项与最佳实践

1. 错误处理：在 async 函数中使用 await 时，如果被 await 的Promise被拒绝，await 会抛出一个错误。因此，强烈建议使用 try...catch 块来捕获并处理这些错误，以防止程序崩溃或提供友好的用户反馈。
2. UI反馈：由于 await 会暂停执行，对于长时间运行的操作（如大文件上传），用户界面可能会显得无响应。在异步操作开始前显示加载指示器，并在操作完成后隐藏它，能够显著提升用户体验。
3. 并行上传 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);
   }

   选择顺序还是并行取决于具体场景：顺序上传适用于严格要求顺序的场景（如图片排序），而并行上传则适用于对顺序无要求但追求效率的场景。

4. 循环条件：在原始代码中，for 循环的条件是 index <= files.length，这会导致尝试访问 files[files.length]，其值为 undefined。正确的循环条件应该是 index < files.length，因为数组的索引是从0到 length - 1。在示例代码中已修正。
5. 资源清理：对于 FileReader 和 Image 等DOM或浏览器API，通常不需要显式清理。它们在作用域结束后或不再被引用时会被垃圾回收。

总结

通过将基于回调的异步操作封装成Promise，并结合 async/await 语法，我们能够以同步代码的风格编写异步逻辑，从而极大地提高了代码的可读性和可维护性。对于多文件上传这类需要严格控制执行顺序的场景，async/await 提供了一种优雅且强大的解决方案，确保文件按照用户预期进行处理和显示。理解并熟练运用这些现代JavaScript特性，是构建健壮、高效前端应用的关键。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。