【文件上传、秒传、分片上传、断点续传、重传】

文章目录

  • 获取文件对象
  • 文件上传（秒传、分片上传、断点续传、重传）
  • 优化

获取文件对象

input标签的onchange方法接收到的参数就是用户上传的所有文件

<html lang="en"><head><title>文件上传</title><style>#inputFile,#inputDirectory {display: none;}#dragarea{width: 100%;height: 100px;border: 2px dashed #ccc;}.dragenter{background-color: #ccc;}</style></head><body><!-- 1. 如何上传多文件：multiple2. 如何上传文件夹：为了兼顾各浏览器兼容性，需设置三个属性：webkitdirectory mozdirectory odirectory3. 如何实现拖拽上传：input默认是有拖拽性质的，但是由于浏览器兼容性问题，开发一般不使用，一般使用div阻止默认事件以及通过拖拽api实现4. 如何获取选择的所有文件--><div id="dragarea"></div><input id="inputFile" type="file" multiple><!-- 如果不想用input自带的上传文件的样式，可以通过button的click触发input的点击事件来上传文件 --><button id="buttonFile">上传文件</button><input id="inputDirectory" type="file" multiple webkitdirectory mozdirectory odirectory><button id="buttonDirectory">上传文件夹</button><ul class="fileList"></ul><script>const inputFile = document.getElementById("inputFile")const buttonFile = document.getElementById("buttonFile")const inputDirectory = document.getElementById("inputDirectory")const buttonDirectory = document.getElementById("buttonDirectory")const dragarea = document.getElementById("dragarea")const fileList = document.getElementById("fileList")const appendFile = (fileList) => {for(const file in fileList){const li = document.getElementById("li")li.innerText = `${file.name}-${file.name.split(".")[1]}-${file.size}`fileList.appendChild(li)}}const traverseFile = (entry) => {if(entry.isFile){entry.file((file) => {const li = document.getElementById("li")li.innerText = `${file.name}-${file.name.split(".")[1]}-${file.size}`fileList.appendChild(li)})}else if(entry.isDirectory){traverseDirectory(entry)}}const traverseDirectory = (directory) => {const reader = directory.createReader()// 创建读取器读取文件夹reader.readEntries((entries) => {for(const entry of entries) {traverseFile(entry)}})}buttonFile.onclick = () => {inputFile.click()}inputFile.onchange = (e) => {const files = e.target.files// 获得用户上传的所有文件appendFile(files)}inputDirectory.onchange = (e) => {console.log(e.target.files)const files = e.target.files// 获得用户上传的所有文件appendFile(files)}buttonDirectory.onclick = () => {inputDirectory.click()}dragarea.ondragenter = (e) => {e.preventDefault();console.log("拖拽进入区域")dragarea.classList.add("dragenter")}dragarea.ondragover = (e) => {e.preventDefault();console.log("拖拽着悬浮在区域上方")dragarea.classList.add("dragenter")}dragarea.ondragleave = (e) => {e.preventDefault();console.log("拖拽离开")dragarea.classList.remove("dragenter")}// 拖拽放开dragarea.ondrop = (e) => {e.preventDefault();dragarea.classList.remove("dragenter")const items = e.dataTransfer.items// 拖拽进来的所有文件for(const item of items){const entry = item.webkitGetAsEntry()traverseFile(entry)}}</script></body>
</html>

文件上传（秒传、分片上传、断点续传、重传）

秒传：调用后端的接口，将md5值传过去，后端判断如果这个md5值对应的文件是否已经合并，如果已经合并，则返回文件上传成功
分片上传：每片大小chunk_size为1m，假如文件1.5m，那么会被分成2片，使用file.slice截取[0,1)，再截取[1,1.5）
断点续传：文件上传前会调用后端的接口，将md5值传过去，后端判断如果这个md5值对应的文件是否已经合并，如果没有合并，会返回这个md5值已经上传的切片的索引，前端重新上传剩余索引的片
并发控制：假如我们把文件切成了100片，如果一下子把这100片全传给后端，会给后端造成并发压力，所以在发送前可以在前端进行并发控制一下，我们将所有的请求都放在队列里，每次从队列里弹出几个请求来发送

明明浏览器可以控制请求并发，为什么前端还要自己控制并发请求？

  1. 避免浏览器并发限制：浏览器对同一域名的并发请求数量是有限制的（通常是 6-8 个，具体取决于浏览器和协议）。如果前端不控制并发请求，可能会导致大量请求堆积，超出浏览器的并发限制，从而阻塞其他重要请求（如关键 API 或资源加载），
  2. 提升用户体验：如果一次性发送过多请求，可能会导致网络带宽被占满，影响页面其他资源的加载（如图片、CSS、JS 等），并且可能会导致部分请求超时或失败，从而浪费网络资源和用户流量。
  3. 错误处理和重试机制：手动控制并发可以更好地实现错误处理和重试机制。
    例如，某个请求失败后，可以立即重试，而不是等待所有请求完成后再处理错误。
  4. 优先级控制：手动控制并发可以实现请求的优先级管理。例如，某些关键请求可以优先发送，而低优先级的请求可以稍后处理。
  5. 兼容性和稳定性：不同浏览器对并发请求的处理方式可能不同，手动控制并发可以确保应用在各种浏览器中表现一致。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>文件上传</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.js"></script><style>#inputFile,#inputDirectory {display: none;}#dragarea {width: 100%;height: 100px;border: 2px dashed #ccc;}.dragenter {background-color: #ccc;}</style>
</head><body><div class="dragarea"></div><input class="inputFile" type="file" multiple><!-- 如果不想用input自带的上传文件的样式，可以通过button的click触发input的点击事件来上传文件 --><button class="buttonFile">上传文件</button><input class="inputDirectory" type="file" multiple webkitdirectory mozdirectory odirectory><button class="buttonDirectory">上传文件夹</button><button class="buttonUpload">点击上传</button><ul class="fileListElement"></ul><script>// 文件交互相关const fileList = []const chunk_size = 1 * 1024 * 1024const requestQueue = []const maxRequest = 2// 最大请求数量let currentRequest = 0// 当前请求数const inputFile = document.getElementsByClassName("inputFile")[0]const buttonFile = document.getElementsByClassName("buttonFile")[0]const inputDirectory = document.getElementsByClassName("inputDirectory")[0]const buttonDirectory = document.getElementsByClassName("buttonDirectory")[0]const dragarea = document.getElementsByClassName("dragarea")[0]const fileListElement = document.getElementsByClassName("fileListElement")[0]const buttonUpload = document.getElementsByClassName("buttonUpload")[0]// 将上传的文件展示在按钮下方const showFileList = (files) => {for (const file in files) {const li = document.getElementById("li")li.innerText = `${file.name}-${file.name.split(".")[1]}-${file.size}`fileListElement.appendChild(li)fileList.push(file)}}const traverseFile = (entry) => {// 拖拽进来的如果是文件，直接展示在按钮下方if (entry.isFile) {entry.file((file) => {const li = document.getElementById("li")li.innerText = `${file.name}-${file.name.split(".")[1]}-${file.size}`fileList.appendChild(li)})} else if (entry.isDirectory) {// 拖拽进来的如果是文件夹，读文件夹，获得文件夹里面的文件traverseDirectory(entry)}}const traverseDirectory = (directory) => {const reader = directory.createReader()reader.readEntries((entries) => {for (const entry of entries) {traverseFile(entry)}})}buttonFile.onclick = () => {inputFile.click()}inputFile.onchange = (e) => {const files = e.target.files // 获得用户上传的所有文件showFileList(files)}inputDirectory.onchange = (e) => {console.log(e.target.files)const files = e.target.files // 获得用户上传的所有文件showFileList(files)}buttonDirectory.onclick = () => {inputDirectory.click()}dragarea.ondragenter = (e) => {e.preventDefault();console.log("拖拽进入区域")dragarea.classList.add("dragenter")}dragarea.ondragover = (e) => {e.preventDefault();console.log("拖拽着悬浮在区域上方")dragarea.classList.add("dragenter")}dragarea.ondragleave = (e) => {e.preventDefault();console.log("拖拽离开")dragarea.classList.remove("dragenter")}// 拖拽放开dragarea.ondrop = (e) => {e.preventDefault();dragarea.classList.remove("dragenter")const items = e.dataTransfer.itemsfor (const item of items) {const entry = item.webkitGetAsEntry()traverseFile(entry)}}// 文件上传buttonUpload.onclick = () => {for (const file of fileList) {if (file.size <= chunk_size) {uploadSingleFile(file)} else {uploadLargeFile(file)}}}// 单文件一整个文件上传// 文件上传通过formData传输，因为formData是前后端都认识的格式，file是只有前端才认识的格式（后端不认识）const uploadSingleFile = (file) => {const formData = new FormData()formData.append("file", file) // 通过append往formData身上添加对象，如果formData身上已有file对象，会覆盖try {axios.post("http://127.0.0.1:3001/upload", formData, {headers: {"content-type": "multipart/form-data"}})} catch (error) {throw error}}// 大文件上传const uploadLargeFile = async (file) => {// 创建文件hash。创建整个文件的hash即可，每个片不用创建hash，因为每片是调用后端的方法上传的，返回成功即上传成功const md5 = await createFileMd5(file)// 大文件分片const chunksList = createChunkFile(file)// 创建文件分片对象const chunkListObj = createChunkFileObj(chunksList, file, md5)// 将md5值传给后端接口，判断文件是否在服务器上存在，如果存在，后端返回isExistObj.isExists为true，则秒传成功，// 如果不存在，后端会返回给你此md5值上传了哪些片，已上传的片的索引放在chunkIds中const isExistObj = await juedgeFileExist(file, md5)if (isExistObj && isExistObj.isExists) {alert('文件已秒传成功！')return}// 文件上传await asyncPool(chunkListObj, isExistObj.chunkIds) // chunkIds：后端返回的，已上传的分片的索引// await Promise.all(promises)concatChunkFile(file, md5)// 文件上传完毕，调用后端合并文件的接口}// 创建文件的md5值const createFileMd5 = (file) => {return new Promise((resolve, reject) => {const reader = new FileReader()// reader.readAsArrayBuffer(file)读取完毕后会调用onload，读取失败调用onerror，读取到的内容在e.target.result中reader.onload = (e) => {const md5 = SparkMD5.ArrayBuffer.hash(e.target.result)resolve(md5)}reader.onerror = () => {reject(error)}reader.readAsArrayBuffer(file)})}// 创建文件分片：每片大小chunk_size为1m，假如文件1.5m，那么会被分成2片，使用file.slice截取[0，1)，再截取[1,1.5）const createChunkFile = (file) => {let current = 0const chunkList = []while (current < file.size) {chunkList.push(file.slice(current, Math.min(current + chunk_size, file.size)))current += chunk_size}return chunkList}// 创建文件分片对象。将文件的md5、文件名、本片在整个文件中的索引，都传入这个对象，调用后端接口上传时会用到的数据都可以封装进来const createChunkFileObj = (chunkList, file, md5) => {return chunkList.map((chunk, index) => {return {file: chunk,md5,name: file.name,index: index,}})}// 文件分片上传const uploadChunkFile = (chunkListObj, chunkIds) => {return chunkListObj.filter((item,index) => (!chunkIds.includes(index)))// 过滤掉已经上传的切片，让已经上传的切片没有下面那个函数.map((chunk, index) => {return () => {const formData = new FormData()formData.append("file", chunk.file, `${chunk.md5}-${chunk.index}`)formData.append("name", chunk.name)formData.append("timestamp", Date.now().toString()) // 防止走缓存try {axios.post("http://127.0.0.1:3001/upload/large", formData, {headers: {"content-type": "multipart/form-data"}})} catch (error) {return Promise.reject(error)throw error}}})}// 判断文件是否存在const juedgeFileExist = async (file, md5) => {try {const response = await axios.post("http://127.0.0.1:3001/upload/exists", formData, {params: {"name": file.nam,md5,}})return response.data.data} catch (error) {return {}throw error}}// 合并请求const concatChunkFile = (file, md5) => {try {axios.post("http://127.0.0.1:3001/upload/concatFiles", {"name": file.nam,md5,})} catch (error) {throw error}}// 把要发送的函数放在队列里，每次从头部取一个函数调用，这样就可以控制并发数量const asyncPool = (chunkListObj, chunkIds) => {return new Promise((resolve,reject) => {requestQueue.push(...uploadChunkFile(chunkListObj, chunkIds))run(resolve,reject)})}const run = (resolve,reject) => {while(currentRequest < maxRequest && requestQueue.length > 0){const task = requestQueue.shift()currentRequest++task().then().finally(() => {currentRequest--run(resolve,reject)})}if(currentRequest === 0 && requestQueue.length === 0) {resolve()}}</script>
</body></html>

优化

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/894925.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Office/WPS接入DS等多个AI工具，开启办公新模式！

Office/WPS接入DS等多个AI工具，开启办公新模式！

在现代职场中&#xff0c;Office办公套件已成为工作和学习的必备工具&#xff0c;其功能强大但复杂&#xff0c;熟练掌握需要系统的学习。为了简化操作&#xff0c;使每个人都能轻松使用各种功能&#xff0c;市场上涌现出各类办公插件。这些插件不仅提升了用户体验&#xff0c;…
阅读更多...
FPGA的IP核接口引脚含义-快解

FPGA的IP核接口引脚含义-快解

疑问 手册繁琐&#xff0c;怎样快速了解IP核各输入输出接口引脚的含义。 答疑 不慌不慌&#xff0c;手册确实比较详细但繁琐&#xff0c;如何快速知晓该部分信息&#xff0c;涛tao道长给你们说&#xff0c;简单得很&#xff0c;一般新入门的道友有所不知&#xff0c;往往后面…
阅读更多...
告别手动操作！用Ansible user模块高效管理 Linux账户

告别手动操作！用Ansible user模块高效管理 Linux账户

在企业运维环境中&#xff0c;服务器的用户管理是一项基础但非常重要的任务。比如&#xff0c;当有新员工加入时&#xff0c;我们需要在多台服务器上为他们创建账户并分配合适的权限。而当员工离职或岗位发生变化时&#xff0c;我们也需要迅速禁用或删除他们的账户&#xff0c;…
阅读更多...
ADC模数转换器概念函数及应用

ADC模数转换器概念函数及应用

ADC模数转换器概念函数及应用 文章目录 ADC模数转换器概念函数及应用1.ADC简介2.逐次逼近型ADC2.1逐次逼近型ADC2.2stm32逐次逼近型2.3ADC基本结构2.4十六个通道 3.规则组的4种转换模式3.1单次转换&#xff0c;非扫描模式3.2连续转换&#xff0c;非扫描模式3.3单次转换&#xf…
阅读更多...
DeepSeek在FPGA/IC开发中的创新应用与未来潜力

DeepSeek在FPGA/IC开发中的创新应用与未来潜力

随着人工智能技术的飞速发展&#xff0c;以DeepSeek为代表的大语言模型&#xff08;LLM&#xff09;正在逐步渗透到传统硬件开发领域。在FPGA&#xff08;现场可编程门阵列&#xff09;和IC&#xff08;集成电路&#xff09;开发这一技术密集型行业中&#xff0c;DeepSeek凭借其…
阅读更多...
【Elasticsearch】nested聚合

【Elasticsearch】nested聚合

在 Elasticsearch 中&#xff0c;嵌套聚合&#xff08;nestedaggregation&#xff09;的语法形式用于对嵌套字段&#xff08;nestedfields&#xff09;进行聚合操作。嵌套字段是 Elasticsearch 中的一种特殊字段类型&#xff0c;用于存储数组中的对象&#xff0c;这些对象需要独…
阅读更多...
【Uniapp-Vue3】创建DB schema数据表结构

【Uniapp-Vue3】创建DB schema数据表结构

右键uniCloud文件下的database文件&#xff0c;点击“新建DB schema”&#xff0c;选择模板&#xff0c;修改文件名&#xff0c;点击“创建” 创建完成后会出现对应的文件&#xff0c;进入该文件进行配置 对文件中的必填选项&#xff0c;用户权限&#xff0c;字段进行配置 其…
阅读更多...
BFS算法篇——广度优先搜索，探索未知的旅程（上）

BFS算法篇——广度优先搜索，探索未知的旅程（上）

文章目录 前言一、BFS的思路二、BFS的C语言实现1. 图的表示2. BFS的实现 三、代码解析四、输出结果五、总结 前言 广度优先搜索&#xff08;BFS&#xff09;是一种广泛应用于图论中的算法&#xff0c;常用于寻找最短路径、图的遍历等问题。与深度优先搜索&#xff08;DFS&…
阅读更多...
蓝耘智算平台使用DeepSeek教程

蓝耘智算平台使用DeepSeek教程

目录 一.平台架构与技术特点 二、DeepSeek R1模型介绍与优势 DeepSeek R1 模型简介 DeepSeek R1 模型优势 三.蓝耘智算平台使用DeepSeek教程 展望未来 耘元生代智算云是蓝耘科技推出的一款智算云平台有着以下特点&#xff1a; 一.平台架构与技术特点 基于 Kubernetes 原…
阅读更多...
1Panel应用推荐：WordPress开源博客软件和内容管理系统

1Panel应用推荐：WordPress开源博客软件和内容管理系统

1Panel&#xff08;github.com/1Panel-dev/1Panel&#xff09;是一款现代化、开源的Linux服务器运维管理面板&#xff0c;它致力于通过开源的方式&#xff0c;帮助用户简化建站与运维管理流程。为了方便广大用户快捷安装部署相关软件应用&#xff0c;1Panel特别开通应用商店&am…
阅读更多...
基于STM32设计的仓库环境监测与预警系统

基于STM32设计的仓库环境监测与预警系统

目录 项目开发背景设计实现的功能项目硬件模块组成设计思路系统功能总结使用的模块的技术详情介绍总结 1. 项目开发背景 随着工业化和现代化的进程&#xff0c;尤其是在制造业、食品业、医药业等行业&#xff0c;仓库环境的监控和管理成为了至关重要的一环。尤其是在存储易腐…
阅读更多...
PbootCMS 修改跳转提示，修改笑脸时间

PbootCMS 修改跳转提示，修改笑脸时间

在使用时&#xff0c;每次都提示这个&#xff1a; 修改方法&#xff1a; 修改跳转时间&#xff1a;找到 handle.php 文件编辑 &#xff0c;调整 setTimeout 函数的时间参数。 修改提示文字&#xff1a;编辑 handle.php 文件&#xff0c;修改提示文字的内容。 隐藏提示页面&am…
阅读更多...
Elasticsearch：向量搜索的快速介绍

Elasticsearch：向量搜索的快速介绍

作者&#xff1a;来自 Elastic Valentin Crettaz 本文是三篇系列文章中的第一篇&#xff0c;将深入探讨向量搜索&#xff08;也称为语义搜索&#xff09;的复杂性&#xff0c;以及它在 Elasticsearch 中的实现方式。 本文是三篇系列文章中的第一篇&#xff0c;将深入探讨向量搜…
阅读更多...
kaggle视频行为分析1st and Future - Player Contact Detection

kaggle视频行为分析1st and Future - Player Contact Detection

这次比赛的目标是检测美式橄榄球NFL比赛中球员经历的外部接触。您将使用视频和球员追踪数据来识别发生接触的时刻&#xff0c;以帮助提高球员的安全。两种接触&#xff0c;一种是人与人的&#xff0c;另一种是人与地面&#xff0c;不包括脚底和地面的&#xff0c;跟我之前做的这…
阅读更多...
Sentinel的安装和做限流的使用

Sentinel的安装和做限流的使用

一、安装 Release v1.8.3 alibaba/Sentinel GitHubA powerful flow control component enabling reliability, resilience and monitoring for microservices. (面向云原生微服务的高可用流控防护组件) - Release v1.8.3 alibaba/Sentinelhttps://github.com/alibaba/Senti…
阅读更多...
“AI隐患识别系统，安全多了道“智能护盾”

“AI隐患识别系统，安全多了道“智能护盾”

家人们&#xff0c;在生活和工作里&#xff0c;咱们都知道安全那可是头等大事。不管是走在马路上&#xff0c;还是在工厂车间忙碌&#xff0c;又或是住在高楼大厦里&#xff0c;身边都可能藏着一些安全隐患。以前&#xff0c;发现这些隐患大多靠咱们的眼睛和经验&#xff0c;可…
阅读更多...
基于DeepSeek API和VSCode的自动化网页生成流程

基于DeepSeek API和VSCode的自动化网页生成流程

1.创建API key 访问官网DeepSeek &#xff0c;点击API开放平台。 在开放平台界面左侧点击API keys&#xff0c;进入API keys管理界面&#xff0c;点击创建API key按钮创建API key&#xff0c;名称自定义。 2.下载并安装配置编辑器VSCode 官网Visual Studio Code - Code Editing…
阅读更多...
SolidWorks教程P2.2【草图 | 第二节】——草图几何关系与编辑

SolidWorks教程P2.2【草图 | 第二节】——草图几何关系与编辑

草图几何关系包括&#xff1a;重合、中点、相切、平行、相等、共线、对称 草图编辑功能包括&#xff1a;裁剪实体、转换实体引用、等距实体 目录 1.草图几何关系 2.裁剪实体 3.转换实体引用 4.等距实体 补充知识&#xff1a;智能尺寸 1.草图几何关系 在之前的草图介绍里…
阅读更多...
WARNING(ORCAP-1589): Net has two or more aliases - possible short?

WARNING(ORCAP-1589): Net has two or more aliases - possible short?

参考链接&#xff1a;ORCAD报错ORCAP-1589-CSDN博客 现象&#xff1a; Capture CIS 使用PCB-DRC检查原理图&#xff0c;报错Net has two or more aliases - possible short? 错误原因&#xff1a; 一个网络有两个网络名称。 问题本质&#xff1a; 原理图管脚型号的设定问题…
阅读更多...
nvm：node 版本管理器

nvm：node 版本管理器

一、先安装git Git 安装完成后执行 git --version查看版本号是否安装成功 二、安装nvm &#xff08;参考链接&#xff1a;mac 安装nvm详细教程 - 简书&#xff09; 官网&#xff08;https://github.com/nvm-sh/nvm/blob/master/README.md&#xff09;查看最新版本安装命令 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023