TLingC's Zone
TLingC's Zone

使用oss与van-uploader实现heif格式图片上传支持

近期在做一个涉及上传手机图片的项目,用户上传的heic/heif格式图片均无法正常在浏览器中预览。

实际显示如下:

caniuse.com 网站中,可见目前主流浏览器均还不支持heic/heif格式的图片。

解决方案

使用oss图片处理

考虑到在前端进行转换有可能遇到兼容性问题,因此选择了在后端完成转换操作。项目使用了阿里云oss用于附件存储,可以使用oss的图片处理功能将格式转换到jpg后再显示。

在阿里云oss添加图片处理规则,然后给图片链接加上处理规则stylename,就可以正常显示了。

修改van-uploader的预览图

另外,项目中使用了vant框架的van-uploader组件,选择图片后,预览图同样无法正常显示。

通过查看参数,可见预览图的src实际绑定了fileList里的content参数,默认是获取了所选图片的base64数据。因此在图片上传完成后直接修改content为上传成功后返回的图片地址就可以正常显示了。

若无特别说明,本文采用 CC BY-SA 4.0 协议进行许可。如需转载,请附上本文链接和本声明。
本文链接:https://tlingc.com/2021/11/using-oss-and-van-uploader-to-support-heif-image-upload/
# #
首页      开发      使用oss与van-uploader实现heif格式图片上传支持

推荐文章

发表评论

textsms
account_circle
email

TLingC's Zone

使用oss与van-uploader实现heif格式图片上传支持
近期在做一个涉及上传手机图片的项目,用户上传的heic/heif格式图片均无法正常在浏览器中预览。 实际显示如下: 在 caniuse.com 网站中,可见目前主流浏览器均还不支持heic/heif格式的…
扫描二维码继续阅读
2021-11-07