下面我将详细讲解实现“Node.js实现兼容IE789的文件上传进度条”的完整攻略，过程中将会包含两条示例说明：
简述
在传统的方式下，采用form表单上传文件时，前端无法获得上传文件具体传输进度，需要后端记录文件上传状态并实时传输给前端，因此本文将介绍如何使用Node.js实现兼容IE789的文件上传进度条。
步骤
1. 安装依赖库
使用nodejs的开发者们可以使用官方模块formidable对表单数据进行解码，并支持自动处理文件上传进度。
按照如下命令来安装formidable
npm install formidable
2. 使用formidable处理文件上传请求
首先我们需要创建一个处理文件上传请求的upload函数，在中间件next中触发，该函数用req对象的on方法来处理文件中的文件数据。
const formidable = require("formidable")
function upload(req, res, next) {
const form = formidable({ multiples: true })
form.parse(req, (err, fields, files) => {
if (err) {
next(err)
return
}
// do something with files
next()
})
form.on("progress", (bytesReceived, bytesExpected) => {
const percent = Math.floor(bytesReceived / bytesExpected * 100)
console.log(`[${new Date().toLocaleTimeString()}]上传进度：${percent}%`)
})
}
在上面的代码中，我们首先引入了formidable模块，然后定义了一个upload函数用于处理表单数据，其内部使用了formidable模块的parse方法解析表单数据，其中next是用来控制中间件流程的。同时，我们注册了一个progress事件实现文件上传进度的记录与展示。
3. 设置前端页面
为使网页上传文件引发upload function，必须要使用html5 FormData上传方式。我们定义一个HTML表单和JavaScript代码分别实现这个：
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="Upload">
</form>
const form = document.querySelector("form")
form.addEventListener("submit", (e) => {
e.preventDefault()
const formData = new FormData(form)
const xhr = new XMLHttpRequest()
xhr.open("POST", "/upload")
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
const percent = Math.floor(event.loaded / event.total * 100)
console.log(`[${new Date().toLocaleTimeString()}] 上传进度：${percent}%`)
}
}
xhr.send(formData)
})
在上述 JavaScript 代码中，我们创建了一个FormData 对象，并使用XMLHttpRequest 对象向Node.js服务器发送数据。
4. 运行服务器
最后我们启动服务器和上传文件的基本路由：
const express = require("express")
const app = express()
app.use(express.static(__dirname + "/public"))
app.post("/upload", upload, (req, res) => {
res.send(200)
})
app.listen(3000, () => {
console.log(`Server listening on port ${3000}`)
})
在上面的代码中，我们定义了Express 应用程序，使用express.static()访问静态资源，定义了一个简单的上传路由 /upload，处理网络请求时，先执行 upload 函数，然后使用res.send()返回一个可选状态码。
示例一
假如你已经有一个使用express框架的nodejs服务端，你只需要根据上述步骤实现文件上传进度条的功能。示例代码可参照上述伪码实现。
示例二
如果你希望了解如何使用Node.js从前端页面上传文件及文件传输进度，可以尝试创建一个Express服务器来实现以下示例。
首先，创建一个项目并初始化：
mkdir express-upload-progress-bar
cd express-upload-progress-bar
npm init -y
第二步：安装依赖
npm install express formidable morgan
然后，在项目根目录创建 app.js 文件
const express = require('express')
const formidable = require('formidable')
const PORT = process.env.PORT || 3000
const app = express()
app.use(express.static('public'))
const upload = (req, res, next) => {
const form = formidable({ multiples: true })
form.parse(req, (err, fields, files) => {
if (err) {
next(err)
return
}
// something to do with files
res.json({ fields, files })
})
form.on('progress', (bytesReceived, bytesExpected) => {
const percent = (bytesReceived / bytesExpected * 100) | 0
console.log(percent)
})
}
app.post('/upload', upload)
app.listen(PORT, () =>
console.log('express-upload-progress-bar is running on port', PORT),
)
A sample HTML page to test our server:
<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
</head>
<body>
<form id="upload">
<input type="file" multiple name="media">
<button type="submit">Upload</button>
<progress max="100" value="0"></progress>
</form>
<script>
const progressBar = document.querySelector('progress')
const form = document.querySelector('#upload')
form.addEventListener('submit', (evt) => {
evt.preventDefault()
const xhr = new XMLHttpRequest()
xhr.open('POST', '/upload', true)
xhr.onload = (event) => {
console.log(event.target.response)
}
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
const percent = (event.loaded / event.total * 100) | 0
console.log(percent)
progressBar.value = percent
}
}
xhr.send(new FormData(form))
})
</script>
</body>
</html>
这样，我们通过这个简单的HTML文件和JS代码实现了从前端页面上传文件及文件传输进度。
总结
在Node.js中实现兼容IE789的文件上传进度条，采用了formidable模块处理文件上传请求，使用XMLHttpRequest对象实现ajax通信，进而将进度数据反馈给用户。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Node.js实现兼容IE789的文件上传进度条 - Python技术站
微信扫一扫 
支付宝扫一扫 