首页>>后端>>SpringBoot->大文件分片上传?

大文件分片上传?

时间:2023-12-02 本站 点击:0

往华为云服务器上传大文件

1、可以使用ossutil命令行工具的cp命令上传大文件。

2、可通过–bigfile-threshold参数控制分片并发上传的文件大小阈值。

3、ossutil上传单个或多个大文件时,可以通过-jobs项和-parallel项,控制并发,优化上传性能。

2021-04-29:Clusterize、大文件分片上传、自动部署

npm install clusterize.js

2upx = 1px

el-upload的http-requst属性可获得文件file。然后对获取的文件进行唯一标识符的生成(md5)。通过 FileReader ,监听加载之后,截取文件后push进一个数组。然后传参。

javascript之大文件分段上传、断点续传

js实现文件切片上传,断点续传

Web Uploader + php视频分片上传

由于最近项目中遇到有做视频上传的功能,决定写一篇文章详细说明大文件上传的原理和使用Baidu WebFE(FEX)团队开发的文件上传插件WebUploader。

利用前端框架WebUploader配置进行对大文件的分片(由Baidu官方测试,每5M一个分片是效率最高的),这里,我的服务端是php,所以需要修改php.ini里面的post_max_size配置,默认是2M,我这里改的是8M。

服务端php接收分片,WebUploader插件会提供一个GUID,可以利用GUID加任意个性化信息做分片名(当然,分片序号需要加上),当所有分片上传完毕后,调用合并请求,对分片进行合并即可。

上传前,我会计算整个文件的MD5值到我们的资源库去查找是否已有相同资源,如果有的话,直接文件共享即可。

首先,我们需要创建对应的文件夹

其实服务端做的事情相对比较简单了,每上传的分片写到一个文件里去,最后把分片按照序号合并起来即可。

用户上传大文件的时候或多或少会有中断,断网的情况,这个时候服务器就会出现多的分片碎片,这个完全占用服务器存储空间的,所以我们需要对这些所谓的垃圾文件做处理,我们可以设置碎片文件的过期时间,如果超过时间还存在的话,进行删除,或者当天删除前一天的分片文件夹也是可以的,这样相对来说比较省事。

为什么将大文件进行切片,比上传整个文件提升上传效率

1、假设一下子上传一个十几个G的大文件到服务器,对方服务器的剩余空间有可能装不下;将大文件进行切片,那上传的时候,对方就会以分片的形式进行储存。假设对方有多台服务器,其他切片还会分布式存储到别的机器上。不同机器上的切片还会进行切片的备份。理论上来说,提升了上传的稳定性和可靠性。

2、切片的工作是客户端做的,一个切片(block)默认大小为128兆。可以用128兆来区分是大文件还是小文件。

3、客户端可以开启多个线程,同时上传不同的切片,提升上传效率。

fetch在ie11浏览器上传文件

实现一个大文件分片上传的功能,仅支持单个文件的分片逐一上传,对上传的文件没有大小限制,但上传速度没有过互联网的测验,本地测验,上传速度约等于本地文件拷贝速度,有很多弊端,但可满足基本的大文件分片上传功能。

本文仅为前端vue,如需后台java,请移步我的另一篇文章:大文件分片上传的后台方法(Java)

1 HTML部分

没啥可说的,使用Element-ui的el-upload标签,上代码

1.1 实现文件的选择与上传(使用Element-ui的el-upload标签)

template

div

el-upload

:accept="accept"

:auto-upload="auotUpload"

action=""

:multiple="multiple"

:http-request="prepareUpload"

/el-upload

/div

/template

登录后复制

1.2 实现文件上传的一个进度条(使用Element-ui的el-progress标签)

template

div

el-card style="margin-top:2px;margin-lift:2%;margin-right:2%;height:40px;"

div style="margin-top:4px;margin-lift:2%"

el-row

el-col :span="8"

div style="margin-top:8px;margin-lift:2%"{{fileInfo.fileName}}/div

/el-col

el-col :span="8"

div style="margin-top:8px;margin-lift:2%"

el-progress :percentage="percentage" type="line" :text-inside="true" :stroke-width="strokeWidth" :status="status"/

/div

/el-col

el-col :span="3"

div style="margin-top:8px;margin-lift:2%"{{fileInfo.fileName}}/{{fileInfo.allNum}}Mb/div

/el-col

el-col :span="5"

el-button type="text" @click="usable=1"暂停/div

el-button type="text" @click="prepareUpload(0)"继续/div

/el-col

/el-row

/div

/el-card

/div

/template

登录后复制

2 JavaScript部分

2.1 参数部分

data(){

return:{

//文件参数

fileInfo:{

md:"",//文件唯一标识码,类似MD5,如果拥有MD5技术可以替换为MD5

allNum:"",//文件分片后的全部分片数量

successNum:"",//上传成功的分片文件数量

fileName:"",//文件名

detail:"",//文件描述

path:"",//文件存储路径

type:0,//文件状态,0为未上传完成,1为上传完成,用于查询时是否展示

parentId:"",//文件类型的父类,用于查询时是否展示

fileTypeId:""//文件类型,用于查询时是否展示

},

SIZE:1024*1024,//控制单个分片文件的大小

//以下为`el-upload`标签使用的参数

accept:"",//控制默认选择的文件类型

autoUpload:true,//是否在选择文件后自动开始上传文件

uploadURL:"",//文件上传地址这里为空,因为不需要使用这个参数,但是必须有

baseURL:"",//文件上传地址的根地址,后边方法中会拼接完成完整的地址,根地址一般为:http://127.0.0.1:8080/demo/......

limit:1,//支持同时上传的文件数量

multiple:false,//是否支持文件多选

showFileList:false,//是否显示文件列表

file:"",//上传文件列表

//以下为进度条组件所用参数

strokeEidth:12,//进度条的高度

percentage:0,//进度条百分比

sataus:"exception",//进度条状态

//以下用于控制文件上传功能是否开启

usable=1

}

}

登录后复制

2.2 方法部分

2.2.1 开始上传之前的验证方法

prepareUpload(params){//准备开始上传

//这里检查是否有文件正在上传,如果上传开始,则usable会被修改为0

if(this.usable===0){return this.$message({message:"当前正在执行文件上传任务,请在当前任务结束后再启动次功能",type="warning"})}

let file=params.file

//这里判断该方法是通过哪里调用的,

//如果是通过选择文件调用,则params!==0,则将文件保存到this.file

//如果是通过继续按钮调用,则params===0,则取用this.file继续执行文件上传

if(params===0){

//这里判断一下是否真的有文件在上传,如果没有,则退出任务

if(this.file===""){return this.$message({message:"当前暂无任务,无法继续",type="warning"})}

file=this.file;

this.$message({message:"文件开始继续上传",type="success"})

}else{

file=params.file;

this.file=params.file

}

//这里验证文件类型,可以根据自己需要进行验证,这里验证是否为zip或rar文件,如果不是则不允许上传

if(!(file.name.substring(file.name.length-4)===".zip"||!(file.name.substring(file.name.length-4)===".rar"){

return this.$message({message:"请选择zip或rar文件",type="warning"})

}

//这里验证文件大小,可自行修改限制

if(file.size1024*1024*1024*3){return this.$message({message:"您无法选择一个大于3GB的文件",type="warning"})}

if(file.size=0){return this.$message({message:"您无法选择一个大于大小为0的文件",type="warning"})}

//开始执行文件上传的前置操作,将usable修改为0

this.usable=0

//修改文件名,用于文件下载时的为文件重命名后带有文件后缀,避免文件无法打开问题

if(this.fileInfo.fileName===""){

this.fileInfo.fileName=file.name

}else{

const a=this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)

if(!(this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)===".7z"||

this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)==="zip"||

this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)==="rar"||)

){

if(fileName.substring(file.name.length-3)===".7z"){

this.fileInfo.fileName+=file.name.substring(file.name.length-3)

}else{

this.fileInfo.fileName+=file.name.substring(file.name.length-4)

}

}

this.getMD5(file)//自己写的一个简易版计算文件唯一标识码,具体介绍在方法中有

this.getFileChunk(file)//获取文件分片集合,用于逐一上传

//这里写一个请求,用于判断文件是否已经上传,判断文件的状态是否已经上传完成

//这里请求方法请使用自己的,我是自己封装的请求方法

el.post("请求地址",this.fileInfo).then((result)=result.json()).then((result)={

this.getResult(result)//因为很多地方需要写同样的内容,就封装了一个方法来将返回值存储起来

//判断一下文件状态,如果为1则表示服务器中存在与该文件相同的文件,则无需再次上传,执行秒传,否则继续执行

if(result.result.type===1){

//执行秒传时需要对数据库进行写入新文件名的操作,所以还需要一个请求来完成

el.post("请求地址",this.fileInfo).then((result)=result.json()).then((result)={

if(result.result.type===1){return this.$message({message:"秒传成功",type:"success"})

}

}else{

this.beforeUpload()//如果文件没有秒传则调用上传之前的方法

}

}

}

登录后复制

2.2.2 开始上传文件

开始上传之前

beforeUpload(){

//循环调用该方法,实现对fileList的逐一上传,该方法主要为避免vue的异步执行导致逻辑错误

//实现方式为通过成功上传次数与总分片数量比较判断何时return

//成功上传次数为后台返回,所以js无需做次数递增,判断依据为this.fileInfo.successNum

this.beginUpload()//调用开始文件上传方法

}

登录后复制

开始上传文件

beginUpload(){

//判断用户是否操作了暂停按钮,如果是则终止任务

if(this.usable===1){return this.$message({message:"任务已暂停",type:"success"})}

//创建请求头

const headers=new Headers({'Csrf-Token':wind


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/SpringBoot/7750.html