未上传图片成功,导致查看图片失败的解决方案
需求前言
创建调查问卷任务时,支持上传或不上传图片,而图片是上传到oss后返回图片路径,操作“创建任务”按钮,图片路径就和任务信息一起入库。但为了应对图片过大上传太慢的问题(同步上传会严重影响用户体验和系统效率),创建任务时需支持图片异步上传,就会出现任务信息入库时,oss还未返回图片URL。就会导致用户创建完任务立即查看,图片就加载失败。
只操作前端的解决方案
1、第一反应就是前端可以通过分片上传图片到oss,加快上传的效率,阿里云官网就有提供oss分片上传的案例,但这种方法治标不治本;
2、在前端方实现图片延迟加载或懒加载,只有当用户滚动到图片所在位置或进行某种操作时才加载图片;
前端配合后端的解决方案
异步上传与任务创建分离
①用户选择图片后,立即异步上传图片到oss,并获取一个唯一上传标识(通常是uuid);
②操作“创建”按钮,创建任务时上传标识连同任务信息一起入库;
后端定时任务
后台开启定时任务根据,根据上传状态、上传标识决定是否去oss查未上传完毕的图片,获取图片URL更新至任务信息;
前端优化
前端在展示任务信息页面时,首先检查图片URL。如果没有图片URL,但是有上传标识,则通过轮询刷新或websocket方式等待后台图片上传完成通知;