背景
截图上的的上传图片后面有个下载图标,点击可以打开图片,IOS最新版本打开页面是乱码,但是安卓可以正常打开,并且同一个组件(其他表单)ios是可以打开的
同一个申请单,不同模块,同一种组件,ios其他模块就可以正常预览,这个模块打开就是乱码,而且在本地测试环境就正常,控制台调整任何ios版本都可以正常预览,并且没有任何报错
ios点击下载之后的页面是:
定位问题
- 同一表单,同一组件:排除项目配置、组件封装问题
- 由于模块不同,该字段名不同,猜想可能绑定数据的属性有差别,验证一下:
发现绑定的都是对象数组,对象成员都是:fileId、fileName、totalBytes,所以排除绑定数据字段缺失问题 - ios识别图片为乱码还有一个原因:iOS不支持WebP格式图片,所以,猜想可能上传图片为Webp格式,验证一下:
可以获取一下该图片详细信息
查看结果之后,可以排除图片上传格式问题 - 我在仔细看了代码之后发现,虽然是同一个组件,但是它的配置不一样,预览正常的只支持Image,乱码的支持Image和Vedio格式
虽然组件配置属性不一样,但他只是对上传类型做了限制,我只是上传了图片,并没有上传Vedio格式,那么他为什么会影响到预览呢?
在我仔细查看了接口之后,发现他们的响应头有些不一样,
正常的反悔了content-type
属性,但是乱码的没有返回该属性
返回的文件流少一个类型的头,那么为什么会缺少呢,查看了数据库发现他们的MINE_TYPE(媒体类型)字段值不一样,定位这就是问题,更改了之后发现确实如此: