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

2024-05-06 15:36:00

字体：大中小

来源：转载

供稿：网友

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

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

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

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

// 前端 upload.html<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title>上传文件demo</title>  <style media="screen">   .progress{    width: 50%;    height: 5px;    border: 1px solid #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: width 0.3s ease-out;   }  </style> </head> <body>  <input id="file" type="file" multiple>  <div class="progress">   <span></span>  </div>  <script type="text/javascript">   var http = function (option) {    // 过滤请求成功后的响应对象    function getBody (xhr) {     var text = xhr.responseText || xhr.response     if (!text) {      return text     }     try {      return JSON.parse(text)     } catch (err) {      return text     }    }    var xhr = new XMLHttpRequest();    // 自定义 beforeSend 函数    if(option.beforeSend instanceof Function) {     if (option.beforeSend(xhr) === false) {      return false     }    }    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.onProgress instanceof Function) {       option.onProgress(event)      }     }    }    // 自定义头部    const headers = option.headers || {}    for (var item in headers) {     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 () {    var fileList = this.files, formData = new FormData();    Array.prototype.forEach.call(fileList, function (file) {     formData.append(file.name, file)    })    // 当上传的数据为 file 类型时，请求的格式类型自动会变为 multipart/form-data, 如果头部格式有特定需求，在我的 http 函数中传入 headers<Object> 即可，大家可自己查看，我这里没有什么特殊处理所以就不传了    http({     type: 'POST',     url: '/upload',     data: formData,     onProgress: function (event) {      console.log(event.percent)      document.querySelector('.progress span').style.width = event.percent + '%';     },     onSuccess: function (data) {      console.log('上传成功')     },     onError: function (err) {      alert(err)     }    })   }  </script> </body></html>

上一篇：json 带斜杠时如何解析的实现

下一篇：NodeJs实现简易WEB上传下载服务器