首页 > 其他分享 >前端上传大文件处理（切片、断点续传）

前端上传大文件处理（切片、断点续传）

时间：2023-09-23 11:47:06浏览次数：32  
标签：断点续传 const filename 切片 let file 上传

思路
1.对文件做切片,即将一个请求拆分成多个请求，每个请求的时间就会缩短，且如果某个请求失败，只需要重新发送这一次请求即可，无需从头开始
2.通知服务器合并切片,在上传完切片后,前端通知服务器做合并切片操作
3.控制多个请求的并发量,防止多个请求同时发送,造成浏览器内存溢出,导致页面卡死
4.做断点续传,当多个请求中有请求发送失败,例如出现网络故障、页面关闭等,我们得对失败的请求做处理,让它们重复发送

前端
步骤1- 切片,合并切片
在JavaScript中，文件FIle对象是Blob对象的子类，Blob对象包含一个重要的方法slice通过这个方法，我们就可以对二进制文件进行拆分,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=s, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
</head>
<body>
<input type="file" id="fileInput">
<button id="uploadBtn">上传</button>
</body>
<script>
// 请求基准地址
axios.defaults.baseURL = 'http://localhost:3000'
// 选中的文件
var file = null
// 选择文件
document.getElementById('fileInput').onchange = function({target: {files}}){
file = files[0]
}
// 开始上传
document.getElementById('uploadBtn').onclick = async function(){
if (!file) return
// 创建切片
// let size = 1024 * 1024 * 10 //10MB 切片大小
let size = 1024 * 50 //50KB 切片大小
let fileChunks = []
let index = 0 //切片序号
for(let cur = 0; cur < file.size; cur += size){
fileChunks.push({
hash: index++,
chunk: file.slice(cur, cur + size)
})
}
// 上传切片
const uploadList = fileChunks.map((item, index) => {
let formData = new FormData()
formData.append('filename', file.name)
formData.append('hash', item.hash)
formData.append('chunk', item.chunk)
return axios({
method: 'post',
url: '/upload',
data: formData
})
})
await Promise.all(uploadList)
// 合并切片
await axios({
method: 'get',
url: '/merge',
params: {
filename: file.name
}
});
console.log('上传完成')
}
</script>
</html>

步骤2- 并发控制

结合Promise.race和异步函数实现,多个请求同时并发的数量,防止浏览器内存溢出,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=s, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
</head>
<body>
<input type="file" id="fileInput">
<button id="uploadBtn">上传</button>
</body>
<script>
// 请求基准地址
axios.defaults.baseURL = 'http://localhost:3000'
// 选中的文件
var file = null
// 选择文件
document.getElementById('fileInput').onchange = function({target: {files}}){
file = files[0]
}
// 开始上传
document.getElementById('uploadBtn').onclick = async function(){
if (!file) return
// 创建切片
// let size = 1024 * 1024 * 10; //10MB 切片大小
let size = 1024 * 50 //50KB 切片大小
let fileChunks = []
let index = 0 //切片序号
for(let cur = 0; cur < file.size; cur += size){
fileChunks.push({
hash: index++,
chunk: file.slice(cur, cur + size)
});
}
// 控制并发
let pool = []//并发池
let max = 3 //最大并发量
for(let i=0;i<fileChunks.length;i++){
let item = fileChunks[i]
let formData = new FormData()
formData.append('filename', file.name)
formData.append('hash', item.hash)
formData.append('chunk', item.chunk)
// 上传切片
let task = axios({
method: 'post',
url: '/upload',
data: formData
})
task.then((data)=>{
//请求结束后将该Promise任务从并发池中移除
let index = pool.findIndex(t=> t===task)
pool.splice(index)
})
pool.push(task)
if(pool.length === max){
//每当并发池跑完一个任务，就再塞入一个任务
await Promise.race(pool)
}
}
//所有任务完成,合并切片
await axios({
method: 'get',
url: '/merge',
params: {
filename: file.name
}
});
console.log('上传完成')
}
</script>
</html>

步骤3- 断点续传

在单个请求失败后,触发catch的方法的时候,讲当前请求放到失败列表中,在本轮请求完成后,重复对失败请求做处理,具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=s, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
</head>
<body>
<input type="file" id="fileInput">
<button id="uploadBtn">上传</button>
</body>
<script>
// 请求基准地址
axios.defaults.baseURL = 'http://localhost:3000'
// 选中的文件
var file = null
// 选择文件
document.getElementById('fileInput').onchange = function({target: {files}}){
file = files[0]
}
// 开始上传
document.getElementById('uploadBtn').onclick = function(){
if (!file) return;
// 创建切片
// let size = 1024 * 1024 * 10; //10MB 切片大小
let size = 1024 * 50; //50KB 切片大小
let fileChunks = [];
let index = 0 //切片序号
for(let cur = 0; cur < file.size; cur += size){
fileChunks.push({
hash: index++,
chunk: file.slice(cur, cur + size)
})
}
// 控制并发和断点续传
const uploadFileChunks = async function(list){
if(list.length === 0){
//所有任务完成,合并切片
await axios({
method: 'get',
url: '/merge',
params: {
filename: file.name
}
});
console.log('上传完成')
return
}
let pool = []//并发池
let max = 3 //最大并发量
let finish = 0//完成的数量
let failList = []//失败的列表
for(let i=0;i<list.length;i++){
let item = list[i]
let formData = new FormData()
formData.append('filename', file.name)
formData.append('hash', item.hash)
formData.append('chunk', item.chunk)
// 上传切片
let task = axios({
method: 'post',
url: '/upload',
data: formData
})
task.then((data)=>{
//请求结束后将该Promise任务从并发池中移除
let index = pool.findIndex(t=> t===task)
pool.splice(index)
}).catch(()=>{
failList.push(item)
}).finally(()=>{
finish++
//所有请求都请求完成
if(finish===list.length){
uploadFileChunks(failList)
}
})
pool.push(task)
if(pool.length === max){
//每当并发池跑完一个任务，就再塞入一个任务
await Promise.race(pool)
}
}
}
uploadFileChunks(fileChunks)

}
</script>
</html>

后端

步骤1.安装依赖

npm i [email protected]
npm i [email protected]

步骤2.接口实现

const express = require('express')
const multiparty = require('multiparty')
const fs = require('fs')
const path = require('path')
const { Buffer } = require('buffer')
// 上传文件最终路径
const STATIC_FILES = path.join(__dirname, './static/files')
// 上传文件临时路径
const STATIC_TEMPORARY = path.join(__dirname, './static/temporary')
const server = express()
// 静态文件托管
server.use(express.static(path.join(__dirname, './dist')))
// 切片上传的接口
server.post('/upload', (req, res) => {
const form = new multiparty.Form();
form.parse(req, function(err, fields, files) {
let filename = fields.filename[0]
let hash = fields.hash[0]
let chunk = files.chunk[0]
let dir = `${STATIC_TEMPORARY}/${filename}`
// console.log(filename, hash, chunk)
try {
if (!fs.existsSync(dir)) fs.mkdirSync(dir)
const buffer = fs.readFileSync(chunk.path)
const ws = fs.createWriteStream(`${dir}/${hash}`)
ws.write(buffer)
ws.close()
res.send(`${filename}-${hash} 切片上传成功`)
} catch (error) {
console.error(error)
res.status(500).send(`${filename}-${hash} 切片上传失败`)
}
})
})
//合并切片接口
server.get('/merge', async (req, res) => {
const { filename } = req.query
try {
let len = 0
const bufferList = fs.readdirSync(`${STATIC_TEMPORARY}/${filename}`).map((hash, index) => {
const buffer = fs.readFileSync(`${STATIC_TEMPORARY}/${filename}/${index}`)
len += buffer.length
return buffer
});
//合并文件
const buffer = Buffer.concat(bufferList, len);
const ws = fs.createWriteStream(`${STATIC_FILES}/${filename}`)
ws.write(buffer);
ws.close();
res.send(`切片合并完成`);
} catch (error) {
console.error(error);
}
})

server.listen(3000, _ => {
console.log('http://localhost:3000/')
})

 

参考文章：http://blog.ncmem.com/wordpress/2023/09/23/%e5%89%8d%e7%ab%af%e4%b8%8a%e4%bc%a0%e5%a4%a7%e6%96%87%e4%bb%b6%e5%a4%84%e7%90%86%ef%bc%88%e5%88%87%e7%89%87%e3%80%81%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0%ef%bc%89/

欢迎入群一起讨论

 

 

标签：断点续传,const,filename,切片,let,file,上传
From： https://www.cnblogs.com/songsu/p/17724070.html

相关文章

  • 大文件断点续传、快传秒传实现方案
    前言为什么视频、音频、大型文档等大文件不能也直接上传吗，简单又方便？遇到手动暂停、网络中断、网络不稳定或者服务端响应超时，当你终于半天到99%，网络突然断开喜提从0%再来一次再者一次服务接受如此大的数据传输，不说服务器肯同意接收，即使配置同意接受这常常会使服务器出现响应超时......
  • 如何实现大文件断点续传、秒传
    大家先来了解一下几个概念：「文件分块」：将大文件拆分成小文件，将小文件上传\下载，最后再将小文件组装成大文件；「断点续传」：在文件分块的基础上，将每个小文件采用单独的线程进行上传\下载，如果碰到网络故障，可以从已经上传\下载的部分开始继续上传\下载未完成的部分，而没有必要从头开始......
  • 文件上传
    beforeUploadFile(file){    constformData=newFormData();    formData.append("files",file);    letparams={      data:formData    }    uploadFile(params).then(res=>{      if(r......
  • 前端大文件上传、文件切片、断点续传
    一、项目初始化1、项目初始化我们创建一个big-file-upload目录作为当前项目的根目录文件。执行以下命令对当前项目进行初始化，生成package.json文件：npminit-y2、搭建项目结构在项目根目录中创建public目录，作为前端静态资源目录。同时在public中创建index.html用于构......
  • 完整教程：使用SPRING BOOT实现大文件断点续传及文件校验
    一、简介随着互联网的快速发展，大文件的传输成为了互联网应用的重要组成部分。然而，由于网络不稳定等因素的影响，大文件的传输经常会出现中断的情况，这时需要重新传输，导致传输效率低下。为了解决这个问题，可以实现大文件的断点续传功能。断点续传功能可以在传输中断后继续传输，而不需......
  • 前端大文件分片上传断点续传
     分片上传分片上传是将大文件分成多个小文件进行上传，每个小文件的大小通常为1MB到10MB。上传时，将每个小文件分别上传到服务器，服务器再将这些小文件合并成一个完整的大文件。这种方法可以提高上传速度，减少上传失败的可能性。断点续传断点续传是指在上传过程中，如果上传失败或者......
  • 图片上传压缩处理
       解决用户上传图片后，按照用户规定的尺寸大小或者按照图片比例，对图片进行压缩。   自己试写的工具类，写的时候考虑了几个关键点：   1、图片格式   JAVA的API很好，com.sun.image.codec.jpeg.JPEGCodec和com.sun.image.codec.jpeg.JPEGImageEncoder这两个类基本上自......
  • JAVA应用XFire框架来实现WebServie的大文件传输功能之二（上传）
    xml文件：<?xmlversion="1.0"encoding="UTF-8"?><beansxmlns="http://xfire.codehaus.org/config/1.0"><service><name>HelloWorldService</name><namespace>http://localhost:8090......
  • Java大文件上传（秒传、分片上传、断点续传）
    一、秒传秒传就是不传，实现逻辑就是看数据库或者缓存里是否已经有这个文件了，有了，直接从已有的文件去拿就可以了（返回文件地址）。这里判断是否是相同文件，要用到信息摘要算法，详情可以参考：一文读懂当前常用的加密技术体系。信息摘要算法常常被用来保证信息的完整性，防止信息在传输过程中......
  • asp 上传
    化境ASP无组件上传类-upload_5xsoft使用手册2.0what'snew1.使用了网友“梁无惧”提供的高效的处理方式，上传速度可提高一倍以上,可上传更大的文件。2.添加了form方法和file方法，把原来的form集和file改为objForm和objFile,避免了若上传时没......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99