图片预览加载需要token认证的地址处理（blob）

最新推荐文章于 2024-11-28 11:27:07 发布

割草的镰刀

最新推荐文章于 2024-11-28 11:27:07 发布

阅读量2.7k

点赞数

分类专栏： bug手记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/fuxiaoxin_csdn/article/details/119963767

版权

bug手记专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了在处理需要权限验证的图片加载时，如何利用img标签的Blob类型数据流特性绕过请求头限制。作者指出，通过将图片数据转换为Blob并直接赋值给src，可以解决这一问题。同时，由于Mock数据可能导致请求头初始化，可能需要删除或调整Mock设置。此外，还介绍了如何将Blob转换为File对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：img加载图片，图片访问地址需要token验证，img控件本身不支持加请求头

方案：img的src除了可以加载url地址，还可以加载blob类型数据流，可以本地下载图片流，然后赋值给src

实现：请求头添加如下，与headler同级

responseType:'blob'

踩坑：如果有使用mock，请求头会被初始化，需要修改对应的数据（没找到具体修改地方），建议删掉不用mock

引申：blob类型转file

let bold='文件bold数据'
let name='文件名'
let type='文件类型'
window.URL.createObjectURL(new window.File(
          [bold],
          name,
          { type: type}
        ))