node.js - 强大的文件上传进度
问题描述
我正在使用带有强大包的 node.js-expresss 后端。我尝试实现一个进度条并决定使用强大的 websockets:
const create = (req, res, io) => {
logger.debug(`EXEC create material`)
const form = new formidable.IncomingForm()
form.encoding = 'utf-8'
form.keepExtensions = true
form.multiples = true
form.maxFileSize = 600 * 1024 * 1024 // 600MB instead of 200MB (default value)
// form.uploadDir = `${__dirname}/uploads`
let oldValue = 0
form.on('progress', (bytesReceived, bytesExpected) => {
let currentValue = (parseFloat(bytesReceived) / parseFloat(bytesExpected)) * 100
if ((currentValue - oldValue) > 1 || currentValue === 100) {
oldValue = currentValue
io.emit('FILE_UPLOAD_STATUS', currentValue)
console.log('FILE_UPLOAD_STATUS', currentValue)
}
})
...
但是,一旦上传所有文件,它似乎会处理文件并显示进度?文件可能很大,所以我在浏览器中看到一个空白的进度条,直到它在很短的时间内从 0% 变为 100%。
我应该更改我的代码并从 xhr 请求中获取进度吗?
解决方案
最后我决定成功地将它移动到浏览器内部的 js 中。使用 axios 是处理进度的最简单/最快的方法。这是我感兴趣的代码(React 应用程序):
axios.request({
method: "POST",
url: `${PRIVATE_API_ROOT}/materials`,
data: formData,
headers: { Authorization: `Bearer ${token}` },
onUploadProgress: ProgressEvent => {
this.setState({
progressStatus: parseFloat(ProgressEvent.loaded / ProgressEvent.total * 100).toFixed(2),
})
}
}).then(data => {
this.setState({
progressStatus: 100,
loading: false,
error: ''
})
}).catch(function (error) {
//handle error
this.setState({ error: error.message })
});
```
推荐阅读
- javascript - jQuery中=登录后如何获取url的值
- sql - 如何正确连接sql表以避免数据重复?
- node.js - 使用 ng build --prod 没有创建 dist 文件夹
- html - 网格布局,一行包含 3 个项目,每个项目的宽度都是自动的
- java - Unexpected response code 303 Volley error
- web-applications - 基础 UML (ALF) Web 系统的动作语言
- java - Java 什么是可抛出的原因?
- javascript - Javascript | Min and Max Method To One DRY Method
- django - 如何在 django 中检查用户是否对 url 有权限
- c# - 使用 EF Core 更新通用存储库上的父集合和子集合