使用node.js怎么实现多文件上传？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联是专业的南票网站建设公司，南票接单;提供成都网站建设、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行南票网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
// 前端 upload.html
上传文件demo
.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;
}
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
