首页 > 其他分享 >前端大文件分断上传

前端大文件分断上传

时间:2024-06-14 10:21:53浏览次数:26  
标签:const chunkSize 前端 start end currentChunk 上传 分断

 

function upload() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];

const chunkSize = 1024 * 1024; // 每个分片的大小,这里设置为1MB
const totalChunks = Math.ceil(file.size / chunkSize); // 总分片数
let currentChunk = 0; // 当前上传的分片

// 读取并上传分片
function uploadChunk(start, end) {
const chunk = file.slice(start, end);

const formData = new FormData();
formData.append('file', chunk);
formData.append('chunk', currentChunk);
formData.append('chunks', totalChunks);

// 发送POST请求上传分片
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
// 继续上传下一个分片
currentChunk++;
if (currentChunk < totalChunks) {
const start = currentChunk * chunkSize;
const end = start + chunkSize;
uploadChunk(start, end);
} else {
console.log('文件上传完成');
}
} else {
console.log('上传失败');
}
})
.catch(error => {
console.error('上传出错', error);
});
}

// 开始上传第一个分片
const start = currentChunk * chunkSize;
const end = start + chunkSize;
uploadChunk(start, end);
}

标签:const,chunkSize,前端,start,end,currentChunk,上传,分断
From: https://www.cnblogs.com/zscxy/p/18247274

相关文章

  • Teamcenter AWC 前端导出Excel表
    1.添加xlsx.js支持://importXLSXfrom'js/xlsx.js'---开发模式可以运行,打包出错constXLSX=require('D:/Siemens/Teamcenter14/aws2/sheetjs-v0.18.5/xlsx.js');2.导出代码同poi很类似 vartableData=[];exportconstexportXlsDemo=function( ){  const......
  • javascript - 文件上传
    最简单的文件上传接口@ControllerpublicclassExcelCtrl{@ResponseBody@RequestMapping(value="upload",method=RequestMethod.POST)publicResultimportExcel(@RequestParamMultipartFilefile,HttpServletResponseresponse)throwsIOExceptio......
  • 前端小白也能懂:ES模块和CommonJS的那些事
    在JavaScript的世界中,模块化是构建大型应用的关键。ES模块(ESM)和CommonJS是两种主流的模块系统,它们各自有着不同的特性和使用场景。你了解它们的区别吗?ES模块(ESM)ES模块是ECMAScript官方标准的一部分,它使用import和export语句来导入和导出模块。ES模块是JavaScript......
  • el-upload拍照上传多个文件报错 ERR_UPLOAD_FILE_CHANGED问题
    最近同事使用el-upload上传图片时出现一个问题,连续拍照多个图片的时候,循环调用接口上传会报错:ERR_UPLOAD_FILE_CHANGED,网上找了很多方案没有解决,下面是我自己的解决过程。1.问题描述我们用的套壳Android,网页发布在远程服务器,Android壳安装在ipad上前端用的组件是el-upload,点......
  • 推荐一款纯前端类似excel的在线表格,功能强大,简单易用,完全开源(带私活源码)
    你曾经想过自己也能在网页上轻松地编辑表格,无需下载复杂的软件吗?现在有一款开源项目名为 Luckysheet 的在线表格工具,是一个强大的前端应用,类似于Excel。非常简单易用,完全开源。一、介绍Luckysheet,最新版名称Univer,一款纯前端类似excel的在线表格,功能强大、配置简单、完......
  • 低代码编辑器的前端开发,难度值不低。
    低代码平台涌现出N多,这个平台中有个重要的功能就是编辑器,如果用前端开发做出编辑器的界面和交互功能,难度值不是一般的大,贝格前端工场在这里浅显的分析一下。一、挑战和难点在低代码编辑器的前端开发中,可能会面临一些挑战和难点,包括:可扩展性:低代码编辑器需要能够支持多种不......
  • 这组可视化界面一出,设计师和前端感觉要火拼啦。
    不是挑事昂,客户对可视化界面要求越来越高,高大上、眼前一亮,甚至3D都快成大屏的标配了,愁坏了设计师,难倒了前端开发,在这种情形下,设计师和前端更应该加强沟通,以防效果做出来,技术实现不了。贝格前端工场本期就为大家分享下,设计师和前端的协作注意事项。在设计师和前端开发人员之间,......
  • 文件上传下载
    前端文件上传这里说的文件上传和文件下载都是针对客户端进行的操作使用如下jsp代码,通过Servlet获取表单数据,是否可以获取到文件信息<%--CreatedbyIntelliJIDEA.User:carlDate:2021/10/9Time:15:46TochangethistemplateuseFile|Settings|F......
  • 前端菜鸡流水账日记 -- Pagination分页
    哈喽哇大家,老规矩,见面先问好,今天是端午节假期后的第一天上班,大家假期开心吗,哈哈哈哈,我还是蛮开心的...今天这篇笔记要分享得主要是一个分页器,但是不一样得地方是因为,首先是ant组件库得,其次是因为是一个被封装了得分页器,平时我们使用得话可能就直接使用了,这个是封装过得,其实大......
  • 前端菜鸡流水账日记 -- 各类网站(持续更新版)
    哈喽大家,这篇文章主要是打算用来放一些我们平时用的到的连接之类的,大多数都是我自己收藏了的,现在和之后如果有新增都会放到这里,持续更新的~~~~(各种类型的都有)------------------------------------------------------------------------------------------------------------......