首页 > 其他分享 >大文件上传的解决方法

大文件上传的解决方法

时间:2023-10-24 12:04:14浏览次数:29  
标签:文件 上传 onprogress 切片 xhr e4% 解决 方法

大文件上传的解决方法
一、使用分片上传的方法
在JavaScript中,File对象是Blob对象的子类,而Blob对象包含一个slice方法,我们可以通过这个方法来对二进制文件进行拆分;
可以使用FormData格式进行上传;
服务器端接口接收到数据,可以通过Multiparty库对数据进行处理;
区分flies和fileds,通过fse.move将上传的文件移动到目标路径下;
客户端使用Promise.all方法,当监听到所有切片已上传完,调用merge接口,通过服务器端来对切片进行合并;
使用Stream对切片边读边写
使用Promise.all判断所有切片是否写入完毕
二、进度条使用浏览器XMLHttpRequest的onprogress方法对进度进行监视
// 作为request的入参
const xhr = new XMLHttpRequest()
xhr.upload.onprogress = onprogress

// 回调方法
onProgress: this.createProgressHandler(this.data[index])

// 接收回调,通过 e.loaded 和 e.total 获取进度
createProgressHandler(item){
return(e) => {
item.percentage = parseInt(String((e.loaded / e.total) * 100))
}
}
三、断点续传核心方法:通过xhr的abort方法,主动放弃当前请求
this.requestList.forEach((xhr) => xhr?.abort());

参考文章:http://blog.ncmem.com/wordpress/2023/10/24/%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e7%9a%84%e8%a7%a3%e5%86%b3%e6%96%b9%e6%b3%95/

欢迎入群一起讨论

 

 

标签:文件,上传,onprogress,切片,xhr,e4%,解决,方法
From: https://www.cnblogs.com/songsu/p/17784460.html

相关文章

  • 文件管理的规范 拟定初稿
    文件管理规范:1、文件和文件夹的命名  附带信息:年月日。  2、文件中要有修改版本记录,起码有修改的日期列表和修改内容。大概说明一下。3、文件夹中有一个文件说明本文件夹做什么用。什么时候可以删除。 项目,日期,地点,负责人,作用,都需要在文件管理中体现出来。 最......
  • 关于程序中插入二进制文件
    若要在程序中插入二进制文件,需要将插入的二进制文件与启动文件放在同一路径下,然后在启动文件中调用.incbin"TEST.BIN"指令即可,如下图:编译后结果如下:此外,.incbin"TEST.BIN"指令要注意放在启动文件的位置,若放的不对可能会导致程序不运行,可按照下图位置放:若要将文件放在......
  • Typora 将 Markdown 文件导出为 Word 格式
    Typora将Markdown文件导出为Word格式 一、背景描述使用Typora编写的Markdown文档,如果想要导出为Word(.docx)格式,会出现提示信息“需要安装Pandoc以继续...” 个人使用的Typora版本为1.2.4 二、解决方案按照提示信息,需要下载Pandoc,进行安装和配置。......
  • HTTP 传输大文件的几种方案
    在JavaScript中如何实现大文件并发上传?和JavaScript中如何实现大文件并行下载?这两篇文章中,阿宝哥介绍了如何利用async-pool这个库来优化传输大文件的功能。本文将为大家介绍一下HTTP传输大文件的几种方案。不过在介绍具体的方案之前,我们先使用Node.js的fs模块来生成......
  • 如何批量分别压缩大量大型文件 |7z 7zip cmd powershell RAR
    Background我们经常压缩文件,这点很普通。但有时候会产生分卷压缩的需求。所谓分卷,就是把压缩文件拆分成若干文件,已达到限制单个文件容量上限的目的。在目前的时代下,这种需求非常小众,但以下两种情况还是有可能会有作用。想把非常大的文件/文件夹上传到网盘,但是网盘有单个文件......
  • 解决“请使用微信打开访问",无法使用自带浏览器
    1.首先用数据线把手机连接到电脑2.手机打开USB调试3.手机进入微信随便打开一个聊天窗口输入并发送:http://debugxweb.qq.com/?inspector=true点击打开这个链接,弹出“执行成功”,即可4.手机微信打开想要抓包调试的网页5.电脑上打开chrome内核的浏览器或edge浏览器chrome内......
  • DocuSeal开源的文件在线签署平台
    DocuSeal是一个开源平台,提供安全高效的数字文档签名和处理功能。它使用一种易于使用的、移动优化的在线工具,创建PDF表单,并能在任何设备上进行填写和签名使用步骤1.使用dockerrun-d--namedocuseal-p3000:3000-v.:/datadocuseal/docusealdockerupdate--restart=always......
  • 信号量解决协调进程同步问题(司机与售票员问题)
    问题描述(在日常生活中司机和售票员的行为动作需要满足一定的规则)分析并发进程的交互点1.首先我们将司机和售票员看成是2个进程,他们需要协调配合完成工作2.我们需要找到进行并发执行过程中的交互点(一个进行肯定要等另一个进程做了才能接着往下做),在这个点上我们需要使用P......
  • flask学习 解决flask migrate 时报No changes in schema detected
    报如上错误说明建表示失败flask-migrate是检测上下文中db.Model的子类来创建表的..,所有我们必须让这个app能够知道有这个models文件的存在,所以,在app文件导入类user......
  • Microsoft 365 解决方案:基于Teams平台的AI Bot使用场景
    博客链接:https://blog.51cto.com/u_13637423后疫情时代的到来,随着企业逐步转化为数字化办公模式,越来越多的电子邮件,会议和通知呈指数级涌入,大家都希望AI能帮助他们减轻繁重的工作量,把有限的工作时间集中在更有意义的工作上。今天给大家分享两款基于Teams平台的AIBot,帮助大家能更好......