前端vue大文件分片上传,
本文介绍了vue分片上传大文件，并在断点处继续传输给七牛云的方法，通过示例代码详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
问题：
前段时间做视频上传业务，通过网页把视频上传到服务器。
视频大小从几十米到1G不等。如果通过一般的HTTP请求发送数据，会遇到以下问题：
1.文件太大，超过了服务器的请求大小限制。2.请求时间太长，请求超时；3.传输中断，必须重新上传，导致之前的所有努力都白费了；
探索过程：
1.之前咨询过群里的大佬，给我推荐过百度的webupload，但是介绍完之后发现是基于jquery封装的。因为项目本身是基于vue开发的，所以尽量不考虑jquery相关的开源框架。
2.查阅资料后，手动实现了上传文件切片到服务器的基本需求。但是由于效率和稳定性的问题，我决定直接把文件转到七牛云。一开始我是用表单上传的方式来实现的。后来各种原因让我分片上传。
3.介绍一下七牛的jssdk。
解决方案：
1.修改服务器上传的限制配置；Nginx和PHP的上传文件限制不要太大，一般5M左右比较好；2.大文件碎片化，一个一个传到服务器，再由服务器合并。这样做的好处是，一旦上传失败，只会丢失一个片段，不会重传整个文件。而且每个碎片的大小可以控制在4MB以内，服务器可以限制在4 M. 3。用七牛JavaScript SDK分块上传。
首先，当我们刚接触一项新技术的时候，我们先绕着官方文档了解一下基本用法~
文档地址：JavaScript SDK
Qiniu-JavaScript-SDK是客户端SDK，不包含令牌生成实现。出于安全考虑，建议通过网络从服务器获取令牌。有关生成的特定代码，请参考server SDK文档。
JavaScript SDK下载地址JavaScript SDK源地址JavaScript SDK在线示例
功能简介
上传大于4M时可以分块上传，上传小于4M时支持断点续传(图片)imageView2(缩略图)imageMogr2(高级处理，包括缩放、裁剪、旋转等。)imageInfo(获取基本信息)exif(获取图片EXIF信息)watermark(文本，图片水印)pipeline(管道，可以链式处理imageView2，imageMogr2，watermark)后端返回给你的获取令牌的json格式必须是这个格式。它必须是内部包装了uptoken字段的json对象。也可以带其他字段，但是必须在第一层找到uptoken。
{
uptoken : 0 mlwpnyya 1 wtpnxfy 9 klyghyfpndzceoml . ,
xxx : .
}
因为token就是这样在其sdk源代码中获得的。他将首先发现在定义的选项字段中是否有uptoken。如果没有uptoken_url，他将发送ajax请求来获取uptoken字段。如果后端一定要基于他的格式，可以修改sdk源代码来实现。如果uptoken_url没有值，返回并调用uptoken_func函数。如果没有一个函数有任何值，将会报告一个错误，因此必须指定这三个函数中的一个。
//getUptoken可能在Init事件或BeforeUpload事件中调用
//case Init事件，getUptken的文件参数将被设置为空值
//如果op.uptoken有值，用op.uptoken设置uptoken
//否则如果op.uptoken_url有值，从op.uptoken_url设置uptoken
//否则如果op.uptoken_func有值，由op.uptoken_func的结果设置uptoken
var getUpToken=function(file) {
if (op.uptoken) {
that . token=op . up token；
返回；
} else if (op.uptoken_url) {
logger.debug(get uptoken from:，that . up token _ URL)；
//TODO:使用莫邪
var Ajax=that . create Ajax()；
ajax.open(GET ，that.uptoken_url，false)；
Ajax . setrequestheader( If-Modified-Since ， 0 )；
//Ajax . onreadystatechange=function(){
//if(Ajax . ready state===4 Ajax . status===200){
//var RES=that . parse JSON(Ajax . responsetext)；
//that . token=RES . up token；
//}
//};
Ajax . send()；
if (ajax.status===200) {
var RES=that . parse JSON(Ajax . responsetext)；
that . token=RES . up token；
logger.debug(get new uptoken:，RES . up token)；
}否则{
logger.error(get uptoken error:，Ajax . responsetext)；
}
返回；
} else if (op.uptoken_func) {
logger . debug( get up token from up token _ func )；
that . token=op . up token _ func(file)；
logger.debug(get new uptoken:，that . token)；
返回；
}否则{
logger.error(需要选项中的[uptoken，uptoken_url，uptoken_func]设置之一！);
}
};
通过npm安装
npm安装qiniu-js
在项目中导入。
导入 qiniu-js/dist/qiniu . min . js ；
HTML
div id=容器
Div id=pickfiles 上传按钮/div
/div
JavaScript
var uploader=Qiniu.uploader({
运行时： HTML5，Flash，HTML4 ，//上传模式，依次降级(只需关注官网)
Browse_button: pickfiles ，//上传选中的点击按钮，必选(记得定义id并保持一致)
//初始化时，必须设置uptoken、uptoken_url和uptoken_func三个参数中的一个。
//如果提供了多个，则其优先级为uptoken uptoken_url uptoken_func
//其中uptoken直接提供上传凭证，uptoken_url提供获取上传凭证的地址。如果需要自定义获取uptoken的过程，可以设置uptoken_func。
Uptoken: YourUploadToken ，//Uptoken是上传凭证，由其他程序生成。
Uptoken _ url:“/up token”，//Ajax请求up token的Url。强烈建议设置它(由服务器提供)
Uptoken_func: function(){ //需要获取Uptoken时会调用这个方法。
//做点什么(一般可以手动发送ajax来获取令牌。如果后端返回格式与官方格式不一致，又不想知道源代码，可以这样调整)
返回uptoken
},
Get_new_uptoken: false，//设置每次上传文件时是否重新获取一个新的uptoken(无特殊要求一般为false)
//down token _ URL:“/down token”，(不用，可以设置)
//Ajax请求downToken的Url，在私有空间使用。JS-SDK会将文件的密钥和域发送到这个地址。服务器返回的JSON必须包含url字段，url值就是文件的下载地址。
//unique_names:默认为true，//false，key为文件名。如果打开这个选项，JS-SDK将自动为每个文件生成密钥(文件名)。
//save_key:默认为true，//false。如果服务器端生成uptoken的上传策略中指定了sava_key，则开启，SDK不会在前端处理该key。
域：‘你的桶域’，//桶域名，下载资源时需要(找后端获取)
Container: container ，//上传区域DOM ID，默认为browser_button的父元素(如果没有实现拖放上传，可以不设置)
Max_file_size: 100mb ，//最大文件大小限制(可以扩大)
flash _ SWF _ URL: path/of/plo upload/moxie . SWF ，//介绍Flash，相对路径(如果不使用Flash进行上传，可以不用设置。一般支持html5上传的浏览器都不会用)
Max_retries: 3，//上传失败的最大重试次数(自动帮你更新碎片)
Dragdrop: true，//开启拖动上传(如果没有实现拖动上传，可以不用设置)
Drop_element: container ，//在上传区域拖动元素的ID，拖动一个文件或文件夹后可以触发上传(如果没有实现拖动上传，可以不用设置)
Chunk_size: 4mb ，//分块上传时，每个块的体积
Auto_start: true，//选择一个文件后，自动上传。如果它是关闭的，您需要绑定自己的事件来触发上传。
//x_vars: {//(不用，可以设置)
//查看自定义变量
//time : function(up，file) {
//var time=(new Date())。getTime()；
//用“时间”做点什么
//返回时间；
//},
//size : function(up，file) {
//var size=file . size；
//用“大小”做一些事情
//返回大小；
//}
//},
初始化：{
FilesAdded: function(up，files) {
plupload.each(文件，函数(文件){
//文件加入队列后，处理相关的事情。
});
},
上传前:函数(上传，文件){
//每个文件上传之前，处理好相关的事情。
//(在上传文件之前做一些处理)
},
UploadProgress :函数(up，file) {
//每个文件上传的时候，处理相关的事情。
//(可以设置进度条信息)
},
FileUploaded :函数(up，file，info) {
//每个文件上传成功后，处理相关的事情。
//其中info是文件上传成功后服务器返回的json，格式为：
//{
// hash : fh8 xvqod 2 MQ 1 mocfi 4s 4k PRL 6d 98 ，
//key: gogopher.jpg
//}
//检查简单的反馈
//var domain=up . get option( domain )；
//var RES=parse JSON(info)；
//var source link=domain / RES . key；获取成功上传的文件的Url。
},
Error :函数(up，err，errTip) {
//上传出现错误时，处理相关事情。
},
UploadComplete :函数(){
//队列文件处理完后，处理相关的事情。
},
键:功能(向上，文件){
//如果想在前端个性化每个文件的密钥，可以配置这个功能
//此配置必须在unique_names: false和save_key: false时生效。
var key=“”；
//在这里用键做一些事情
//(您可以在不设置默认文件名的情况下自定义密钥)
回车键
}
}
});
//domain是七牛空间对应的域名。选择空间后，可以通过空间设置-基础设置-域名设置查看。
//uploader是一个plupload对象，它继承了所有的plupload方法。
总结
由于这个项目只涉及大文件的上传，没有使用图像处理相关api的经验，所以官方案例不多。总结一下，上传七牛云的套路就是在后台给你提供uptoken或者获取uptoken的接口地址的时候带上这个token。返回的字段应该是正式的格式。如果没有，也可以修改源代码或者在uptoken_func中手动获取。另外，如果要修改上传的服务器，也要在qiniu.js中修改
/**
*奇牛上传网址
* qiniuUploadUrls 用于在当前url不可用时更改目标
* @type {Array}
*/
var qiniuploadurls=[
//http://upload.qiniu.com ，
//http://up.qiniu.com ，
将其修改为您需要的地址，
];
如果使用表单上传，可以不引用任何插件。代码实现如下：
form id= test form method= post enctype= multipart/form-data
输入名称= key id= key type= hidden value=
输入name= token type= hidden id= token value=
输入id= user file name= file type= file /
！-用手机拍照-
！-input id= user file name= file accept= image/* type= file /-
！-用手机拍视频-
！-input id= user file name= file type= file accept= video/* /-
输入名称=接受类型=隐藏/
/表单
JS:
上传(){
const FormData=new FormData(document . getelementbyid( test form )；
$.ajax({
网址：上传七牛云服务器，后端提供，//http://up.qiniu.com
方法： post ，
成功：函数(数据){
console.log(数据)；
},
})
.
}
需要注意的是，每个输入的属性都需要定义，令牌不能为空。需要提前通过ajax从后端获取令牌或者使用后端给的令牌，否则上传会失败~
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。