前后端配合实现大文件断点续传（前端逻辑）

断点续传作用：当上传文件时，大文件上传时耗时过长，如果遇到网络卡顿、断网等情况，再重新开始上传的体验感非常不好。前端优化分片上传文件，上传时把大文件分成很多个小文件，等到网络状况恢复了之后，即从之前上传断点处继续上传，提高用户体验。

实现思路：点击上传时获取上传文件，解析切片数据，设置切片大小，处理成多个切片数据，判断每个切片数据是否上传成功，未上传成功的部分继续上传，如果所有切片上传成功，合并全部已上传文件给后端接收。

vue+element ui 的上传 demo

<template><div class="appUpload"><el-upload drag action:auto-upload="false" :show-file-list="false" :on-change="changeFile":before-upload='beforeload'><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload><!-- PROGRESS --><div class="progress"><el-progress :percentage="totalText"></el-progress><el-link type="primary" v-if="totalText>0 && totalText<100" @click="handleBtn"> {{btn===true?'暂停上传':'继续上传'}}</el-link></div></div>
</template>

js逻辑部分

接口部分自行封装引入自己项目的接口

//引入computeSlice函数（js封装的切片后每个切片的返回数据 传入原始文件和切片大小）
//引入beforeUpload函数上传之前校验
import { computeSlice ,beforeUpload} from '@/utils/fileutils'

   beforeload(file) {beforeUpload(file)//上传前校验 根据自己的项目需求校验},//点击上传async changeFile(file) {this.uploadFile = file;let  size = 1024 * 1024 * 1;//设置切片大小let fileInfo =await computeSlice(file,size);//处理切片内容 获取切片fileInfo对象this.nSize = fileInfo.files.length;this.fileMd5 = fileInfo.fileMd5if( await this.getcheckFileMd5(fileInfo.info.suffix)){//如果该文件存在于数据库/之前上传过 则弹出提示 //终止以下程序return;}for(let i = 0; i < fileInfo.files.length; i++) {let status=await this.FileMd5(i,fileInfo.fileMd5)if(status && this.btn){await this.sendRequest(i,fileInfo.fileMd5,fileInfo.files[i])}}if(this.total  == this.nSize){this.getComplete(fileInfo.fileMd5);}},
//验证是否上传过该文件async getcheckFileMd5(suffix){let data={checkFileMd5:this.fileMd5,suffix:suffix}var  status;//checkFileMd5为封装后判断该视频是否上传接口 自行导入自己项目的后端接口即可await checkFileMd5(data).then((res) => {if (res.data) {this.$message({message: '该视频已上传',});}status= res.data;});return status;},//判断分片是否上传接口async FileMd5(num,value){let status;//checkChunk为封装后判断该视频每块分片是否上传接口 自行导入自己项目的后端接口即可await checkChunk({fileIndex:num,fileMd5:value}).then((res) => {if(res.data == false){status= true;}else{this.total++;status=  false;}});return status;},//上传接口async  sendRequest(num,value,item) {let chunkFile = new FormData();chunkFile.append("chunkFile", item);//chunkFileUpload为封装后上传接口 自行导入自己项目的后端接口即可await  chunkFileUpload(num,value,chunkFile).then((res) => {if (res.code == 200) {this.total ++;this.totalText = Math.floor(this.total / this.nSize *100)}});},//合并上传接口getComplete(fileMd5){let  params= {chunkTotal:this.nSize,fileMd5: fileMd5,}//mergeChunk为封装后合并上传接口 自行导入自己项目的后端接口即可mergeChunk(params).then((res) => {if (res.code == 200) {this.$message({message: '上传成功',type: 'success'});this.total = 0;this.totalText = 100;}});},//点击该按钮 暂停或继续上传分片 未上传或上传完毕后该按钮隐藏handleBtn() {if (this.btn) {// 断点续传this.btn = false;return;}else{this.btn = true;this.total = 0;this.totalText= 0;this.changeFile(this.uploadFile);}}

utils目录下fileutils文件封装需要用到spark-md5的MD5值要npm引入

npm install --save spark-md5

 let SparkMD5 = require('spark-md5')

// let SparkMD5 = require('spark-md5')
import SparkMD5 from 'spark-md5'//引入spark-md
//解析数据
export  function fileParse(file, type = "base64"){return new Promise(resolve => {let fileRead = new FileReader();if (type === "base64") {fileRead.readAsDataURL(file);} else if (type === "buffer") {fileRead.readAsArrayBuffer(file);}fileRead.onload = (ev) => {resolve(ev.target.result);};});
}//计算切片方法 异步改成同步方法
export async function  computeSlice(file,chunkSize){if (!file) return;var fileInfo={fileMd5:'',files:[],info:{}};fileInfo.info.filename=file.name;file = file.raw;// 解析成buffer数据// 切片处理，把文件切成多个部分（固定数量/固定大小)// 每一个切片都有自己的部分数据和自己的名字let buffer ;await fileParse(file, "buffer").then((res)=>{buffer =res;});let  spark = new SparkMD5.ArrayBuffer();spark.append(buffer);//元素后面追加一个字符串fileInfo.fileMd5= spark.end();fileInfo.info.suffix = '.'+/\.([0-9a-zA-Z]+)$/i.exec(file.name)[1];let cur = 0;let  nSize =Math.ceil(file.size / chunkSize) for(let i = 0; i < nSize; i++) {fileInfo.files.push(file.slice(cur, cur + chunkSize));cur += chunkSize;}return fileInfo;//输出一个切片后对象 fileInfo.files为切片后数组
}//上传前校验  自行根据自己项目的需求进行校验
export  function beforeUpload(file) {// 格式校验let { type, size } = file;console.log(type)// if (!/(png|gif|jpeg|jpg)/i.test(type)) {//   this.$message("文件合适不正确~~");//   return false;// }if (type != "video/mp4") {this.$message("文件合适不正确~~");return false;}if (size > 200 * 1024 * 1024) {this.$message("文件过大,请上传小于200MB的文件~~");return false;}return true;}

前后端配合实现大文件断点续传（前端逻辑）相关推荐

前后端配合实现密码找回功能思路
-前后端配合实现密码找回功能前端-邮箱验证用户进入忘记密码页面(localhost:8080/#/FindPwd),将用户名和图形验证码填入.前端对用户名进行后端校验(调用后端的api判断该用户名 ...
【vue】前端基于 vue-simple-uploader 实现大文件断点续传和分片上传
文章目录一.前言二.后端部分新建Maven 项目后端 pom.xml 配置文件 application.yml HttpStatus.java AjaxResult.java CommonCo ...
Flash大文件断点续传解决方案
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
html5解决大文件断点续传6,解决html5大文件断点续传
一.概述所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...
精品分享：基于 SpringBoot + Vue 开发的云盘系统（含大文件断点续传剖析）
引言作为开发人员,我们经常需要存储和下载文件,为了使用方便,通常都会将文件存储在云端,市面上使用率最高的云端存储莫过于百度网盘了,但使用别人的东西难免会受到各种各样的限制,必须花钱才会享受到更好的服 ...
文件上传控件-如何上传文件-大文件断点续传
需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制. PC端全平台支持,要求支持Window ...
iOS开发之网络编程--使用NSURLConnection实现大文件断点续传下载
前言:iOS开发之网络编程--使用NSURLConnection实现大文件断点续传下载是在前篇iOS开发之网络编程--使用NSURLConnection实现大文件下载的基础上进行断点续传的设置 ...
多线程大文件断点续传和流媒体的处理方法
2019独角兽企业重金招聘Python工程师标准>>> 在使用Squid做反向代理的CDN节点时.多线程大文件断点续传和流媒体的处理是怎么样啦.前些日子花了点时间研究了一下. 在Sq ...
spring boot+iview 前后端分离架构之文件上传的实现（三十一）
spring boot 与 iview 前后端分离架构之文件上传的实现(三十一) 公众号文件上传前端改造 main.js引入配置的全局变量编写baseImgUpload图片上传组件 baseIm ...

前后端配合实现大文件断点续传（前端逻辑）

前后端配合实现大文件断点续传（前端逻辑）相关推荐

最新文章

热门文章