首页 > 其他分享 >并发上传的JS代码

并发上传的JS代码

时间:2024-08-26 10:47:57浏览次数:5  
标签:files const results uploadQueue 并发 file error JS 上传

async function uploadFile(file) {
    const formData = new FormData();
    formData.append('video', file);

    try {
        const response = await fetch('YOUR_UPLOAD_URL', {
            method: 'POST',
            body: formData,
        });

        if (!response.ok) {
            throw new Error(`Upload failed: ${response.statusText}`);
        }

        const result = await response.json();
        console.log('Upload successful:', result);
    } catch (error) {
        console.error('Error uploading file:', error);
    }
}

async function uploadFiles(files, concurrencyLimit) {
    const uploadQueue = [];
    const results = [];

    for (const file of files) {
        const uploadPromise = uploadFile(file).then(result => {
            results.push(result);
        });

        uploadQueue.push(uploadPromise);

        // 控制并发数
        if (uploadQueue.length >= concurrencyLimit) {
            await Promise.race(uploadQueue); // 等待最先完成的上传
            uploadQueue.splice(uploadQueue.findIndex(p => p === uploadPromise), 1); // 移除已完成的上传
        }
    }

    // 等待所有剩余的上传完成
    await Promise.all(uploadQueue);
    return results;
}

// 使用示例
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');

uploadButton.addEventListener('click', () => {
    const files = Array.from(fileInput.files);
    const concurrencyLimit = 3; // 设置并发数

    uploadFiles(files, concurrencyLimit)
        .then(results => {
            console.log('All uploads completed:', results);
        })
        .catch(error => {
            console.error('Error during uploads:', error);
        });
});

 

标签:files,const,results,uploadQueue,并发,file,error,JS,上传
From: https://www.cnblogs.com/llcdbk/p/18380569

相关文章

  • Node.js 安装与使用及连接 MongoDB 的详细教程
    下面我将详细讲解如何安装Node.js、介绍Node.js的脚手架工具、使用Express脚手架创建项目,以及如何安装和连接MongoDB。一、Node.js安装下载Node.js:访问Node.js官方网站。根据你的操作系统选择最新的LTS(长期支持版)版本下载并安装。一般推荐使用LTS版本,因为......
  • 基于javaweb+jsp的鲜花商城系统
    基于javaweb+jsp的鲜花商城系统的设计与实现~开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis+JSP工具:IDEA/Ecilpse、Navicat、Maven系统展示前台后台摘要  当下,正处于信息化的时代,许多行业顺应时代的变化,结合使用计算机技术向数字化、信息化建设迈......
  • 京东面试:600Wqps高并发ID如何设计?时钟回拨 如何解决?
    文章很长,且持续更新,建议收藏起来,慢慢读!疯狂创客圈总目录博客园版为您奉上珍贵的学习资源:免费赠送:《尼恩Java面试宝典》持续更新+史上最全+面试必备2000页+面试必备+大厂必备+涨薪必备免费赠送:《尼恩技术圣经+高并发系列PDF》,帮你实现技术自由,完成职业升级,薪......
  • 基于springboot+vue.js的牙科就诊管理系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SpringBoot前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • 基于ssm+vue.js的附学费管理系统带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍后端框架SSM前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • Zblog上传后如何安装网站程序
    上传Z-BlogPHP程序到网站目录打开你的网站(如:http://xxx/),进入安装界面建立数据库若选择MySQL数据库,请输入空间商为您提供的MySQL帐号密码等信息若选择SQLite,请确保服务器支持SQLite,安装程序将在点击下一步后自动创建SQLite数据库文件填写你为站点设置的管理员账号密码,务必使用强口......
  • 【Linux】并发与并行:理解多任务处理的核心概念
    文章目录并发与并行:理解多任务处理的核心概念1.什么是并发?2.什么是并行?3.并发与并行的区别4.并发与并行的共同点与挑战5.选择并发还是并行?6.总结并发与并行:理解多任务处理的核心概念在现代计算中,性能和效率是关键问题。为了提高处理能力,计算机系统利用了并......
  • JS中数组去重方法总结
    在JavaScript中,数组去重是一个常见的操作,目的是移除数组中的重复元素,确保数组中每个元素都是唯一的。以下是几种常用的数组去重方法,分别适用于不同的情况:1.使用Set对象Set是ES6引入的新数据结构,它类似于数组,但其中的每个值都是唯一的。利用这一特性,可以很容易地去重......
  • SpringBoot文档之JSON的阅读笔记
    ReferenceCoreFeaturesJSON支持Gson、Jackson、JSON-B。SpringBoot提供了组件spring-boot-starter-json。注解,如下:@JsonComponent@JsonMixin重要的类,如下:JsonSerializerJsonDeserializerKeyDeserializerJsonObjectSerializerJsonObjectDeserializer参......
  • 基于Node.js+vue四川省非物质文化遗产之传统美术数字平台设计与实现(程序+论文+开题报
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在全球化与现代化的浪潮中,非物质文化遗产作为民族文化的瑰宝,正面临着传承与保护的严峻挑战。四川省,作为中华文化的重要发源地之一,拥有丰富的非物质文化遗产......