首页 > 其他分享 >前端大文件上传优化方案——分片上传

前端大文件上传优化方案——分片上传

时间:2023-11-13 15:56:37浏览次数:37  
标签:文件 前端 upload file 分片 var 上传

介绍前端上传大文件的常见问题和解决方案,分片上传

这样可以避免一次性上传大文件导致的网络超时、内存溢出、进度不可控等问题。

要实现大文件分片上传,通常需要以下几个步骤:

1.通过DOM获取文件对象,并且对文件进行MD5加密(文件内容+文件标题形式),采用SparkMD5进行文件加密;

2.进行分片设置,利用Blob的slice方法进行文件分片处理,并且依次进行上传;

3.当分片文件上传完成后,请求合并接口后端进行文件合并处理即可。

一个简单的js代码示例如下:

// 获取input元素
var input = document.getElementById("file");
// 获取选择的第一个文件
var file = input.files[0];
// 设置每个分片大小为5MB
var chunkSize = 5 * 1024 * 1024;
// 计算总共有多少个分片
var totalChunks = Math.ceil(file.size / chunkSize);
// 定义一个数组存放所有的分片
var chunks = [];
// 遍历所有的分片
for (var i = 0; i < totalChunks; i++) {
  // 利用slice方法获取每个分片
  var start = i * chunkSize;
  var end = Math.min(file.size, start + chunkSize);
  var blob = file.slice(start, end);
  // 将每个分片添加到数组中
  chunks.push(blob);
}
// 定义一个变量存放当前正在上传的分片索引
var currentChunk = 0;
// 定义一个函数用于递归地上传每个分片
function upload() {
  // 如果当前索引等于总数,则说明所有分片都已经上传完成,请求合并接口即可
  if (currentChunk === totalChunks) {
    console.log("All chunks uploaded!");
    // 请求合并接口(省略)
    return;
  }
  // 获取当前要上传的分片对象
  var chunk = chunks[currentChunk];
  // 创建一个表单数据对象,添加相关信息(如MD5值、索引、总数等)
  var formData = new FormData();
  formData.append("file", chunk);
  formData.append("md5", file.md5); // 假设已经计算好了MD5值(省略)
  formData.append("index", currentChunk);
  formData.append("total", totalChunks);
  
   // 创建一个XMLHttpRequest对象,发送POST请求到服务器端(假设地址为/upload)
   var xhr = new XMLHttpRequest();
   xhr.open("POST", "/upload");
   // 监听请求状态变化事件
   xhr.onreadystatechange = function () {
     if (xhr.readyState === XMLHttpRequest.DONE) {
       if (xhr.status ===200) {
         console.log("Chunk " + currentChunk + " uploaded!");
         // 如果成功,则递增索引,并继续调用upload函数
         currentChunk++;
         upload();
       } else {
         console.log("Upload failed!");
         // 如果失败,则重试或者提示错误信息(省略)
       }
     }
   };
   // 发送表单数据对象
   xhr.send(formData);
}
// 调用upload函数开始上传第一个分片
upload();

以上就是分片上传的核心思想和实现步骤,有什么问题欢迎指正。

 

参考文章:http://blog.ncmem.com/wordpress/2023/11/13/%e5%89%8d%e7%ab%af%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e4%bc%98%e5%8c%96%e6%96%b9%e6%a1%88-%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论

 

 

标签:文件,前端,upload,file,分片,var,上传
From: https://www.cnblogs.com/songsu/p/17829344.html

相关文章

  • JavaScript使用JS从JSON获取信息并遍历输出到网页展示信息------前端
    遍历JSON获取数据<!DOCTYPEhtml><!--这是HTML的注释--><htmllang="en"id="myHtml"> <head> <!--这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码--> <metacharset="UTF-8"> <metaname="viewport"......
  • node+express服务给前端提供markdown数据,前端渲染md文件在页面上
    本文介绍后端怎么把markdown文件发给前端,前端又怎么渲染在页面中。先看效果图md文件代码: 前端网页渲染: 先介绍node+express怎么提供接口:constexpress=require("express");constrouter=express.Router();constfs=require("fs");router.get("/api/getMark......
  • Java 小文件上传、大文件分片上传、断点续传、秒传的开发原理
    1、前言 文件上传在项目开发中再常见不过了,大多项目都会涉及到图片、音频、视频、文件的上传,通常简单的一个Form表单就可以上传小文件了,但是遇到大文件时比如1GB以上,或者用户网络比较慢时,简单的文件上传就不能适用了,用户辛苦传了好几十分钟,到最后发现上传失败,这样的系统用户体......
  • 优秀的前端工具FinClip Studio 有哪些值得期待的价值点?
    现今,移动应用程序已成为一项重要的技术,人们几乎在所有方面都使用移动应用程序,包括社交媒体、电子商务、娱乐、健康和生产力等领域。用户对移动应用程序的体验和功能需求越来越高,这意味着开发人员需要花费更多的时间和精力来确保应用程序的质量和用户体验。幸运的是,现在有许多可用......
  • 轻量前端框架能否与小程序结合应用?
    前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件(按钮,表单等等),使用前端框架可以帮助快速地搭建网站。框架是提供一套完整的解决方案,按照规定好的代码结构来做编排,使用前端框架可......
  • 第十一章、web前端架构师
    目录二十四、自研统计服务,使作品能实现分渠道统计1、二十四、自研统计服务,使作品能实现分渠道统计1、......
  • 如何将视频上传到可用于HTML5 <video> 标签的 'src' 属性的平台?
    要将视频上传到可用于HTML5<video>标签的'src'属性的平台,您需要遵循以下步骤:1.选择一个支持视频上传的平台,例如YouTube、Vimeo或自建服务器。2.注册并登录到所选平台。3.创建一个新的视频项目或上传您的视频文件。4.获取视频的嵌入代码或URL。这通常可以在平台的管理页......
  • 什么是前端应用开发的 LCP(Largest Contentful Paint) 指标
    在网页性能优化的领域里,LCP(LargestContentfulPaint,最大内容绘制)是一个非常重要的性能指标。它测量的是从页面开始加载到页面的"主要内容"完全呈现在屏幕上所需的时间。换句话说,LCP是测量用户何时看到页面的"主要内容"的指标。在理解LCP之前,我们需要知道一个概念,那就是......
  • 前端歌谣的刷题之路-第八十题-无重复数组
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目......
  • 前端歌谣的刷题之路-第八十一题-数组排序
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目......