广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript之分片上传,断点续传的实际项目的示例分析
  • 853
分享到

javascript之分片上传,断点续传的实际项目的示例分析

2024-04-02 19:04:59 853人浏览 泡泡鱼
摘要

小编给大家分享一下javascript之分片上传,断点续传的实际项目的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!总所

小编给大家分享一下javascript之分片上传,断点续传的实际项目的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

总所周知,上传大文件时由于各种原因突然中断,然后整个文件需要从头开始上传,这种情况非常令人抓狂??,那么怎样才可以避免这种尴尬的情况呢?分片上传或许可以搞定这个痛点

原理:文件上传就是把文件切割成一个个小小的块,然后块逐一上传

后台约定接口:

1.getRestChunkInfo 获取当前文件的上传情况

输入:{fileName, fileSize, md5, token}

输出:{chunk_list, chunk_size, chunk_count}

chunk_list是一个数组,未上传块的编号等信息,

chunk_size:分片的大小,

chunk_count:分片的总次数,

2.uploadAPI

输入:FORMData对象,块的具体信息

{file_name, file_size, file_md5, token}

输出:一个对象,包含true/false

步骤:

1.获取需要上传的文件,用md5算法做消息摘要,就是md5码作为文件的唯一标识

2.将md5码、文件名、文件大小、token值作为输入参数传给后台第一个api

3.接口返回chunk_list等参数,用chunk_list.shift取分片继续调用第二个接口,一片一片上传文件块

4.所有文件上传完成后,为了防止中间有出错的分片,在次请求第一个接口,如果chunk_list的length为0,则说明所有分片上传成功

完成上面的步骤后,后台在确认所有的分片上传完成后,就可以进行文件合并了。

图解:

javascript之分片上传,断点续传的实际项目的示例分析

其中token值不是必传参数,仅仅是系统为了防止CSRF攻击,出于安全考虑的。Note:安全考虑还有加签验签功能

难点:

1.如何切片,使用Blob对象的slice方法  blob.slice(startByte,endByte);

2.当前文件已上传的片数,然后保证我从哪一片开始上传

以上是“javascript之分片上传,断点续传的实际项目的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: javascript之分片上传,断点续传的实际项目的示例分析

本文链接: https://www.lsjlt.com/news/67907.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascript之分片上传,断点续传的实际项目的示例分析
    小编给大家分享一下javascript之分片上传,断点续传的实际项目的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!总所...
    99+
    2022-10-19
  • Node.js实现分片上传断点续传示例详解
    目录正文文件的分片与合并并发控制使代码可复用服务端接口实现正文 大文件上传会消耗大量的时间,而且中途有可能上传失败。这时我们需要前端和后端配合来解决这个问题。 解决步骤: 文件分片,...
    99+
    2022-11-13
  • springboot大文件上传、分片上传、断点续传、秒传的实现
    对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很容易导致内存问题。所以对于大文件上传,采用切块分段上传,从上传的效率来看,利用多线程并发上传能够达...
    99+
    2022-11-13
  • js自己实现一个大文件切片上传+断点续传的示例代码
    目录首先我们来分析一下需求一、 格式校验二、 文件切片三、 断点续传 + 秒传 + 上传进度PM:喂,那个切图仔,我这里有个100G的视频要上传,你帮我做一个上传后台,下班前给我哦,...
    99+
    2022-11-13
  • element-ui上传图片后标注坐标点的示例分析
    这篇文章给大家分享的是有关element-ui上传图片后标注坐标点的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。什么是element-ui    element-ui是由饿...
    99+
    2023-06-20
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作