在编辑器里直接粘贴微信截图,图片能显示在正文里,保存时接口回 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。

作者 9823189