请教一个如何判断当前网页是否有文件处于上传状态的问题

事情是这样子的,某网站后台(不方便直接发出来),我需要批量上传一些比较大(几十M)的文件,以前没问题,后面有bug了,不仅上传没有进度条,也不会显示文件上传中,只会在结束时有一个上传成功的提示,这个提示不需要用户确认,会自动消失。

也就是说需要一直盯着电脑(不盯着提示会自动消息就找不到了),看到了这个提示,然后在去点保存按钮。否则就白费功夫。

比较气人的是有时候传了较长时间,感觉应该传成功了,只是那个提示我没有看到,就点了保存按钮,点完以后,结果上传成功的提示出来了。

这个时候即没有保存成功,也不能重新在上传了,因为网站后台会判定文件重复。只能去把文件内容改变一下(使其md5值改变),然后再来传,浪费时间。

我感觉在文件上传时,f12浏览器控制台里应该是能看到一些东西了。也不需要看进度条,只需要能看到当前是否有文件上传和无文件上传(传结束)即可。

但研究了一会,当我点上传文件时是发起了很多个新请求,但还是弄不明白怎么能看到当前是有文件在上传还是无文件上传?

我好像弄明白了一些,在浏览器控制台网络那里输入blob(上图),当有文件上传时就会有blob形式的链接出现,并且传输内容不断的变大。这应该就是文件在上传中?blob连接不在有网络消耗,应该就是上传已结束?

你已经找对地方了

去看网站的 js 代码,然后用 Tampermonkey 直接改 js 代码去增加一个 hook。

这个网站的js代码过于复杂了,而且现在前端js代码大都是压缩混淆过的,很难看。目前感到唯一可行的办法就是通过看blob连接是否处于活动状态来判断是否有文件在上传中

不难,搜一下“文件上传完成”这种提示在哪就容易定位了

这儿提供了两个思路:

  • Advice xhr/fetch 函数来控制网络请求
  • PerformanceObserver 来检测网络事件

发现一个坑,因为文件是批量选择上传的,而 “文件上传完成”这个提示是异步的,每个上传文件的进程都有,也就是说,如果同时上传了4个文件,看到“文件上传完成”这个提示也不能相信了,因为可能只是第一、二个文件上传成功时弹出来的,后面的还在传。

而同时上传4个文件就有4个blob请求,只有4个请求都不活动了才能确定是4个都传完了