vue使用axios上传图片设置进度提示onUploadProgress

原文链接: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
}