2023网站推荐,商标注册核名查询系统,自定义图片 wordpress,人才招聘网网站策划方案大文件切片上传
背景介绍#xff1a;当涉及大文件上传时#xff0c;一种有效的方法是将大文件分割成小切片并逐个上传。这种技术不仅可以减轻服务器的负担#xff0c;还可以避免上传过程中的中断和内存问题。本文将介绍如何使用JavaScript实现大文件切片上传#xff0c;并…大文件切片上传
背景介绍当涉及大文件上传时一种有效的方法是将大文件分割成小切片并逐个上传。这种技术不仅可以减轻服务器的负担还可以避免上传过程中的中断和内存问题。本文将介绍如何使用JavaScript实现大文件切片上传并解释如何处理断点续传、并发控制以及上传取消等问题用到的知识点有大文件切片、中止上传 、上传进度、断点续传、并发数量控制。
切片上传原理
大文件切片上传的基本原理是将文件分成多个固定大小的小切片然后逐个上传到服务器。服务器收到这些切片后可以按顺序合并它们还原为完整的文件。这种方法不仅能提高上传效率还能应对网络波动和服务器性能限制。
实现步骤
下面是实现大文件切片上传的基本步骤
切片生成 使用JavaScript将大文件切割成小切片可以使用File API中的File.slice()方法。
切片上传 将切片逐个上传到服务器可以使用XMLHttpRequest或Fetch API发送切片数据。
服务器处理 服务器接收并保存切片并记录每个切片的索引。
切片合并 当所有切片上传完成后服务器按照索引顺序合并切片或者后端提供合并接口将hash值传给后端进行合并还原为完整文件。
断点续传
通过记录已上传切片的索引即使上传过程中断也可以从断点处继续上传。服务器只需判断已存在的切片避免重新上传。
并发控制
为了避免同时上传大量切片导致网络拥塞可以控制并发上传数。例如一次最多只上传3个切片等待其中一个完成后再上传下一个。
上传取消
允许用户在上传过程中取消操作是很重要的。为此可以使用一个标记来判断是否取消上传如果取消则终止上传过程。
接下来我们将深入探讨如何在JavaScript中实现这些功能。从切片生成和上传开始逐步讲解如何处理断点续传、并发控制和上传取消。
话不多说上代码
templatediv classmanageinput typefile changehandleFileChange multiple /button clickstop停止上传/buttonspan当前已上传{{progress}}%/span/div
/templatescript
export default {name: Menu,props: {},mounted () {},data () {return {progress: 0,stopUpload: false,totalChunks: null,selectedFiles: [],uploadPromises: [],concurrentLimit: 2 // 控制并发数量}},methods: {handleFileChange (event) {this.selectedFiles Array.from(event.target.files)this.startUpload(event.target.files)},async uploadFile (file, index, total) {return new Promise((resolve, reject) {// 模拟上传操作实际上传操作可能需要使用 XMLHttpRequest 或其他上传库// setTimeout(async () {// console.log(Uploaded: ${file.name})// const formData new FormData();// formData.append(fileChunk, file);// formData.append(chunkIndex, index);// formData.append(totalChunks, total);// const response await fetch(upload-url, {// method: POST,// body: formData// });// const result await response.json();// resolve(result)// }, 1000) // 假设上传耗时 1 秒setTimeout(async () {console.log(Uploaded: ${file.name})resolve()}, 2000) // 假设上传耗时 1 秒})},async startUpload (file) {console.log(file, file)this.uploadPromises []const size 1024 * 1024const formNum Math.ceil(file[0].size / size)const hashes []for (let i 0; i formNum; i) {const start size * i;const end size * (i 1)const chunk file[0].slice(start, end);const hash await this.calculateHash(chunk);console.log(this.stopUpload, this.stopUpload)if (this.stopUpload) return falsehashes.push(hash)// 将需要上传的切片和对应的哈希值添加到FormData中// 断点续传逻辑需要后端判断前端根据片段生成唯一hash值后端存储hash,续传时候需要判断若已上传直接给出进度const promise this.uploadFile(chunk, i, formNum)this.uploadPromises.push(promise)if (this.uploadPromises.length this.concurrentLimit) {await Promise.race(this.uploadPromises) // 控制并发this.uploadPromises.shift() // 移除已完成的 Promise}this.progress (i / formNum) * 100}console.log(hashes, hashes)await Promise.all(this.uploadPromises) // 等待剩余的上传完成console.log(全部完成上传)// 调用后端提供合并接口// const response await fetch(upload-merge, {// method: POST,// body: hashes// })},async calculateHash (chunk) {const buffer await chunk.arrayBuffer()const hashBuffer await crypto.subtle.digest(SHA-256, buffer)const hashArray Array.from(new Uint8Array(hashBuffer))const hashHex hashArray.map(byte byte.toString(16).padStart(2, 0)).join()return hashHex},stop () {this.stopUpload true}}
}
/script
