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

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

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

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

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

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

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

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

你已经找对地方了

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

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

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

这儿提供了两个思路:

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

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

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

发现了一个很苯但似乎是可行的办法,操作也简单。

新建个文件夹把要上传的文件都放进去,然后在传,感觉要传完了,就把文件夹的名字改了,随便乱打个字符,这时显示文件夹重命名成功那就是真的传完了,显示重命名失败 文件夹正在使用中,那就表示还没传完,还在传…

应该只在windows上可行,因为windows不允许重命名开着的文件,而linux(mac和其他不确定)是可以的

以前也很不喜欢windows这个功能,当想操作某个文件时,发现动不了,不能重命名、不能剪切、也不能删除;要把使用了这个文件的程序找出来,结束掉才能动,问题是找不出来,只能猜,而进程太多,可能一不小心把某些重要进程结束了,而文件还是动不了

真是没想到,原来这个功能还能这样用