背景
自己搭建blog,使用腾讯cos 存放blog 图片。
文章为富文本,图片链接是直接保存在富文本img标签上的,想着以后腾讯cos桶到期之后,如何处理这些图片路径。
以后迁移图片之后,不用去修改富文本图片路径。
解决方案
1.图片迁移之后,每篇文章手动修改(不太科学)
2.监听img标签 error 事件(集成三方富文本编辑器,不太靠谱)
3.图片src自定义请求,使用ngnix转发请求,node处理(推荐)
注:这里使用的三种方式解决
原理
文章富文本中img标签 src 为相对路径 例如 /api/getfile?path=xxxx,当加载图片时静态资源会被nginx 拦截,该请求 /api/getfile?path=xxxx node会接收处理,先获取path 在拼上腾讯cos桶的地址,发送请求获取到图片,然后在返回给img标签展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGqDT68i-1653221670030)(…/…/…/api/getfile?path=blog%2F_static_1653215451336_mceclip0.png)]
具体操作
第一步:img 中的src 地址是接口地址,会被nginx拦截,服务转发到我的node 后台服务
第二步:node 处理请求 成功返回图片流
const _base_dir = '腾讯云cos桶地址';
export async function getFile(ctx, next){
const { path } = ctx.request.query;
if(!path) {
ctx.body = RESPONSE_DATA.error;
return;
}
try{
const response = await fetch(_base_dir+encodeURIComponent(path));
if (!response.ok) throw new Error(`unexpected response ${response.statusText}`);
const streamPipeline = promisify(pipeline);
ctx.status = 200;
await streamPipeline(response.body, ctx.res );
}catch(err){
ctx.body = RESPONSE_DATA.error;
}
}
腾讯云cos服务到期之后,迁移图片资源之后,只需要替换_base_dir 地址就好了