使用async/await异步处理多张图片同时上传到服务器

最新推荐文章于 2026-06-25 07:10:56 发布

原创

最新推荐文章于 2026-06-25 07:10:56 发布 · 1.1k 阅读

收录于

本文介绍了如何在前端项目中利用async/await处理用户多张图片的异步上传。在用户完成图片选择后，一次性将所有图片数据发送到服务器。通过将图片数据存储在数组中，待全部选择完毕后进行批量上传。

在项目上遇到这样的需求，就是问题反馈，允许用户上传图片。

因为是多图片同时上传，而且考虑到用户可能会更换已经选择的图片，所以没办法做到用户input[type="file"]选择一次图片就上传图片到服务器，必须是等到用户选择完毕后再一起上传。

比如用户这时候选择了5张图片，前端代码方面每次当用户选择一张图片，就把图片数据存入声明的 files 数组中。

<input id="upload-img" class="ipt-file" type="file" onchange="showImg" />
<button onclick="submit">提交</button>

var files  = []
function showImg() {
    let el = document.querySelector("#upload-img");
    files.push(el.files[0]);
}

// 带有 async 的函数会返回一个 Promise 对象，我们可以执行此函数，然后用then()添加回调函数
async function beforeSubmit() {
    let resArr = []; // 声明数组来存放请求返回的数据
    // 循环遍历 files 数组，每次循环都使用 await 关键字处理异步请求，这样我们的异步请求就会按顺序进行，只有等到 await 后面的异步操作完成，才会接着函数体内后面的代码。
    for (let i = 0; i < files.length; i++) {
        resArr[i] = await axios.post('请求上传图片接口地址','请求数据')
    }
    let urlarr = []; // 声明数组来存放返回数据中的数据
    resArr.forEach(item => {
        urlarr.push(item.da