问题是在我这两天在重构我的前端管理系统的上传功能时候遇到的问题,大致要求是:
- 用户选择文件后批量上传到七牛
- 显示上传队列中各文件的文件名和上传进度
- …
代码像这样:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25/* input[type=file]触发了change事件, 执行上传 */
function filechange (e) {
for (var file of e.target.files) {
var task = { // 建立上传任务对象
complete: false,
percent: 0,
loaded: 0,
name: file.name,
size: file.size
}
queue.unshift(task) // 插入队伍前端
qiniu.upload(file, key, token).subscribe({ // 开始ajax异步上传
next (res) { // 上传进度更新回调
task.percent = res.total.percent // 更新每个task的上传进度信息
task.loaded = res.total.loaded
},
error: (err) => console.log(err), // 上传错误回调
complete (res) { // 上传完成回调
task.complete = true // 标记每个task上传完成
// post and save to db ...
}
})
}
e.target.value = '' // 清空value的值确保选择相同的文件可以正确触发change事件
}
咋一看代码很正常,相信有的同学根据需求第一时间会写出我这样的代码。如果用相同逻辑的java代码去运行的话是没问题的,但js这么写的话就有问题了:
回调程序永远只更新最后一个unshift()
到队列的task
的上传进度!