粘贴截屏图片到textarea上传服务器时文件内容为空问题求助

我之前也碰到过一模一样的问题——用PrintScreen截的图粘贴到textarea后，明明通过onpaste事件拿到了File对象，请求也正常发出去了，服务器却始终收不到文件内容。看你贴的请求载荷，确实只有文件名和类型，文件内容那块是空的，这问题出在剪贴板数据的读取方式上。

先说说原因：咱们用PrintScreen截的图，剪贴板里存的是内存中的图像数据，不是真正的本地文件。虽然event.clipboardData.files能返回一个File对象，但这个对象其实是空壳子，没有实际的二进制数据。

下面是修正后的代码，亲测有效：

onpaste(event) {
  // 先阻止默认粘贴行为，避免图片以base64形式插入textarea（如果不需要的话）
  event.preventDefault();
  
  const clipboardItems = event.clipboardData.items;
  if (!clipboardItems) return;

  // 遍历剪贴板里的所有项，找图像类型的内容
  for (let item of clipboardItems) {
    if (item.type.startsWith('image/')) {
      // 把剪贴板里的图像数据转换为真正的Blob对象
      const blob = item.getAsFile();
      if (!blob) continue;

      // 准备上传的FormData
      const formData = new FormData();
      formData.append('file', blob, 'screenshot.png'); // 这里可以自定义文件名
      formData.append('csrf', CSRF_TOKEN);

      // 发送请求
      const oReq = new XMLHttpRequest();
      oReq.open('POST', exports.url('/file'));
      oReq.setRequestHeader('Accept', 'application/json');
      
      // 可以加上传结果的回调
      oReq.onload = function() {
        if (oReq.status === 200) {
          console.log('截图上传成功啦:', oReq.responseText);
        } else {
          console.error('上传失败，状态码:', oReq.status);
        }
      };

      oReq.send(formData);
      break; // 找到图像就停止遍历，避免处理其他剪贴板内容
    }
  }
}

关键改动点 #

1. 改用clipboardData.items读取数据：相比files，items能更准确地获取剪贴板里的原始数据类型，针对图像类型的项调用getAsFile()才能拿到包含完整二进制数据的Blob（File是Blob的子类）。
2. 阻止默认粘贴行为：如果不需要把图片以base64的形式插入到textarea里，一定要调用event.preventDefault()，避免干扰后续的上传逻辑。
3. 自定义文件名：你可以根据实际需求修改screenshot.png，只要扩展名和图像类型匹配就行。

如果还需要在textarea里显示这张截图，你可以把Blob转换成base64格式，然后插入到textarea中，比如：

// 在拿到blob之后
const reader = new FileReader();
reader.onload = function(e) {
  // 把base64图片插入textarea
  event.target.value += e.target.result;
};
reader.readAsDataURL(blob);

内容的提问来源于stack exchange，提问作者php_nub_qq