node.js实现带进度条的多文件上传
程序员文章站
2022-07-05 12:13:46
用node.js实现多文件上传并携带进度条的demo，供大家参考，具体内容如下
这个独立封装的需求来自一个朋友公司，他说需要写一个带进度条动画的批量上传文件的组件，结果他...
用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>
后端所用的一些东西我放在这
// 后端(node.js) upload.js
var express = require('express');
var path = require('path');
var fs = require('fs');
var app = express();
var bodyparser = require('body-parser'); // 过滤请求头部相应格式的body
var multer = require('multer');
var chalk = require('chalk'); // 只是一个 cli 界面字体颜色包而已
var log = console.log.bind(console);
app.use(express.static('static'));
// 接受 application/json 格式的过滤器
var jsonparser = bodyparser.json()
// 接受 application/x-www-form-urlencoded 格式的过滤器
var urlencodedparser = bodyparser.urlencoded({ extended: false })
// 接受 text/html 格式的过滤器
var textparser = bodyparser.text()
// 自定义 multer 的 diskstorage 的存储目录与文件名
var storage = multer.diskstorage({
destination: function (req, file, cb) {
cb(null, 'view')
},
filename: function (req, file, cb) {
cb(null, file.fieldname)
}
})
var upload = multer({ storage: storage })
// 页面渲染
app.get('/', function (req, res) {
res.sendfile(path.join(__dirname, 'view/upload.html'));
})
app.post('/test', textparser, jsonparser, function (req, res) {
log(req.body);
var httpinfo = http.address();
res.send({
host: httpinfo.address,
port: httpinfo.port
})
})
// 对应前端的上传接口 http://127.0.0.1:3000/upload, upload.any() 过滤时不对文件列表格式做任何特殊处理
app.post('/upload', upload.any(), function (req, res) {
log(req.files)
res.send({message: '上传成功'})
})
// 监控 web 服务
var http = app.listen(3000, '127.0.0.1', function () {
var httpinfo = http.address();
log(`创建服务${chalk.green(httpinfo.address)}:${chalk.yellow(httpinfo.port)}成功`)
})
上传完毕后重新上传我没写动画重置，大家实际用的时候肯定是需要展示每个上传文件的，每次上传文件都对应着一个进度条，所以应该抽象为一个组件，至于组件的抽象我这就不详细写了，那个就很容易了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。