在编辑器里直接粘贴微信截图,图片能显示在正文里,保存时接口回 400,提示 filename invalid。手动选图上传又是正常的。日志里能对上时间点,这种反而好排。
剪贴板里的图片项是一个没有名字的 Blob,构造 FormData 时文件名是空的或者叫 image.png。后端的文件名校验不允许空值,请求在入口就被挡了。这一点先确认清楚,后面就不用反复试。
for (const item of e.clipboardData.items) {
if (item.type.startsWith('image/')) {
const blob = item.getAsFile();
const file = new File([blob], `paste-${Date.now()}.png`, { type: blob.type });
upload(file);
}
}
围绕「粘贴截图上传」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。
别只看报错的最后一行,往上看几行,真正的起因通常在上面。
处理上按这个顺序:遍历 clipboardData.items,挑出 type 以 image/ 开头的项转成 File;自己补一个带时间戳的文件名和正确扩展名,再塞进 FormData;上传成功后用返回地址替换正文里的临时 blob 链接。
结果对不对很好判断,粘贴一张截图后正文能显示,保存成功,返回的是上传后的真实地址而不是 blob。
