好资源导航 » 文章资讯 » node.js实现带进度条的多文件上传

node.js实现带进度条的多文件上传

2023-08-17 20:16:04 58

用node.js实现多文件上传并携带进度条的demo，供大家参考，具体内容如下

这个独立封装的需求来自一个朋友公司，他说需要写一个带进度条动画的批量上传文件的组件，结果他们后端跟他说不能多文件上传，我一听就很尴尬了，怎么可能不能多文件呢哈哈，后来我只是告诉他进度条的实现方式，在过了2天后我一直对此事耿耿于怀，所以干脆自己动手用node写了一个多文件上传的demo，并记录下来。

前端:http请求为自己封装的一个原生请求函数，一切以原生代码为主；
后端(nodeJs):express+multer，自定义multer包的diskStorage函数;

直接上demo吧，我加上一点注解就好，就不用详细说明了,其中写了一个测试接口用来测试，可以不用管；

//前端upload.html




上传文件demo

.progress{
width:50%;
height:5px;
border:1pxsolid#ccc;
border-radius:4px;
margin-top:10px;
position:relative;
}
.progress>span{
display:inline-block;
position:absolute;
border-radius:4px;
top:0;
left:0;
height:100%;
width:0;
background-color:rgb(98,230,74);
transition:width0.3sease-out;
}

varhttp=function(option){ //过滤请求成功后的响应对象 functiongetBody(xhr){ vartext=xhr.responseText||xhr.response if(!text){ returntext } try{ returnJSON.parse(text) }catch(err){ returntext } } varxhr=newXMLHttpRequest(); //自定义beforeSend函数 if(option.beforeSendinstanceofFunction){ if(option.beforeSend(xhr)===false){ returnfalse } } xhr.onreadystatechange=function(){ if(xhr.status===200){ if(xhr.readyState===4){ //成功回调 option.onSuccess(getBody(xhr)) } } } //请求失败 xhr.onerror=function(err){ option.onError(err) } xhr.open(option.type,option.url,true) //当请求为上传文件时回调上传进度 if(xhr.upload){ xhr.upload.onprogress=function(event){ if(event.total>0){ event.percent=event.loaded/event.total*100; } //监控上传进度回调 if(option.onProgressinstanceofFunction){ option.onProgress(event) } } } //自定义头部 constheaders=option.headers||{} for(variteminheaders){ xhr.setRequestHeader(item,headers[item]) } xhr.send(option.data) } //测试接口 http({ type:'POST', url:'/test', data:JSON.stringify({ name:'yolo' }), onSuccess:function(data){ console.log(data) }, onError:function(err){ console.log(err) } }) document.getElementById('file').onchange=function(){ varfileList=this.files,formData=newFormData(); Array.prototype.forEach.call(fileList,function(file){ formData.append(file.name,file) }) //当上传的数据为file类型时，请求的格式类型自动会变为multipart/form-data,如果头部格式有特定需求，在我的http函数中传入headers

node.js实现带进度条的多文件上传

热门推荐

随机推荐