移动端粘贴图片上传报错Failed to execute 'createObjectURL'的原因及修复方案

我开发了一个在textarea中通过复制粘贴实现图片上传的功能，该功能在桌面端运行正常，但在手机端复制粘贴图片时出现如下错误：

Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.

效果对比 #

• 桌面端效果（粘贴3次）：
  
• 移动端效果：
  

报错原因 #

移动端浏览器（尤其是iOS Safari、部分安卓浏览器）处理粘贴图片数据的逻辑和桌面端存在差异：

• 桌面端粘贴图片时，剪贴板中的图片数据通常是标准的File或Blob类型，完全符合createObjectURL的参数要求；
• 移动端部分浏览器会将图片以DataTransferItem形式存储，直接提取时可能不是标准的Blob/File对象，甚至可能是base64字符串或自定义格式数据，导致createObjectURL无法识别参数类型，触发过载解析失败错误。

修复方案 #

修改剪贴板数据处理逻辑，确保传递给createObjectURL的是标准Blob或File对象：

1. 优先调用DataTransferItem.getAsFile()获取文件对象，该方法在移动端和桌面端都能稳定返回标准File；
2. 如果无法直接获取File，尝试将剪贴板中的数据转换为Blob类型；
3. 增加参数类型校验，仅当参数为Blob/File类型时才调用createObjectURL。

示例修复代码片段：

document.querySelector('textarea').addEventListener('paste', (e) => {
  e.preventDefault();
  const items = e.clipboardData.items;
  for (const item of items) {
    if (item.type.includes('image')) {
      // 优先获取标准File对象
      const file = item.getAsFile();
      if (file) {
        const imgUrl = URL.createObjectURL(file);
        // 此处添加图片展示/上传逻辑
        console.log('图片链接:', imgUrl);
      } else {
        // 兼容处理base64格式的图片数据
        item.getAsString((data) => {
          if (data.startsWith('data:image/')) {
            const blob = dataURItoBlob(data);
            const imgUrl = URL.createObjectURL(blob);
            // 此处添加图片展示/上传逻辑
          }
        });
      }
    }
  }
});

// 辅助函数：将base64字符串转换为Blob
function dataURItoBlob(dataURI) {
  const [metaPart, dataPart] = dataURI.split(',');
  const mime = metaPart.split(':')[1].split(';')[0];
  const byteString = atob(dataPart);
  const buffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(buffer);
  
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }
  
  return new Blob([buffer], { type: mime });
}

额外注意事项 #

• 移动端部分浏览器限制剪贴板访问权限，需确保页面在HTTPS环境下运行（本地开发localhost除外）；
• 测试时覆盖主流移动端浏览器（iOS Safari、安卓Chrome、微信内置浏览器等），验证兼容性。

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