问题描述
后端异步上传图片到oss,同步返回图片链接给前端,产生图裂怎么解决?
问题出现的环境背景及自己尝试过哪些方法
因为后端异步上传图片到oss,如果图片数量比较大上传会比较耗时,由于图片链接是固定的,后端先返回了图片链接,导致前端这边直接展示图裂
如果后端改为同步上传,那么如果同时上传多张图片的时候,多个上传任务并发执行,服务器压力比较大,前端等待时间会很久,前端这边图片还需要显示loading
如果后端异步上传,然后前端不断轮询去查看图片是否上传成功,成功之后再显示在页面上,这种也不是一个很好的方案
你期待的结果是什么?实际看到的错误信息又是什么?
关键问题在于如何保持后端的异步上传同时前端能够快速友好地展示图片
从用户侧选择图片上传,你应该使用 OSS 直传 API,而不是使用先上传到服务器,再由服务器上传到 OSS。
即使是按照你现有的方案,前端在上传完后,在后端上传到 OSS 之前,你也应该在前端使用 FileReader 直接读取选择的文件进行展示,而不是访问 OSS 的,如果需要显示 OSS 的链接,也可以利用 img 的 onerror 事件来轮训查询,当 OSS URL 图片返回成功后再显示。