原文链接:https://dsx2016.com/?p=991
微信公众号:大师兄2016
场景
微信公众号H5
上传照片的时候前端进行压缩后上传
由于使用canvas
转blob
流的兼容性问题,导致如ios 10.0
系统等出现异常
表现为提交按钮一直处理提交中,既没有返回错误提示,也没有表示完成,卡在那里没反应
难点
如果是本地测试还好,能够针对性的调试和兼容
但是上述问题都是基于庞大的用户基数暴露在线上
同时因为涉及到敏感信息和用户反馈的积极性,导致很难排查问题,只能了解到机型等信息
也因为涉及到文件流体积较大,反馈时间比较长,受网速等影响,用户可能等到一半就不等了,以为有问题
运营既没有反馈60s
的timeout
吐司提示,后台也说没有看到错误日志,没有用户的录屏截图,无法获取关键信息
但是因为前端是表现层,图片无法上传是比较严重的现象,这种场景下,连用户是否真正发起http
请求都不能完全确定
改进
原先是只提交canvas
的blob
流,在遇到兼容等异常问题时,无法提交图片等
做了容错处理后,在点击提交时,如果检测到没有压缩后的blob流,则上传选择照片时的源file
(虽然没有压缩但好过上传失败)
但是仅此一点仍然无法很好的解决问题,因为上传时间过长,本身就是一种问题
如果证明前端已经发起了http
请求,并且在超时前给用户足够明显的反馈信息呢?
同时也是给自己排查信息的时候,了解真正的网速和错误反馈等信息.
那就是设置进度条,最好是带有数值的进度条,这样网速快慢,上传进度一目了解.
思考
容错处理
在使用htmlcanvas
的插件的时候,文档上并没有catch
的容错处理,所以下意识的忽略了错误的场景.
后来在处理异常的时候,监听文件最后的文件流file
或者blob
是否存在,存在则提交对应的数据.
把try catch
也使用了,因为没有埋点上报,只能尽可能的考虑错误的场景
文件进度
本意是打算看看axios
提供的方法有没有可以定位http
已经发起请求的功能
然后看到axios
本身就有提供文件上传下载的进度值方法,进度有值,本身就代表请求中
其实回归到产品原型设计,在文件上传和下载的地方,最好有应该有当前进度提示,无论是数值还是进度条
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
}
// `onDownloadProgress` allows handling of progress events for downloads
// browser only
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
}