如何修改剪贴板获取的File对象文件名？解决只读属性报错

云原生阿岚

2026-7-24

解决File对象文件名无法修改的问题

问题原因

File对象的name属性是只读属性，直接赋值会触发类型错误，这是浏览器API的设计限制，无法直接修改现有File实例的name。

解决方案

基于原文件的二进制数据，创建一个新的File对象，指定新的文件名即可。新File对象会保留原文件的内容和类型，仅替换文件名。

修改后的代码

@HostListener('paste', ['$event'])
onPaste(e: ClipboardEvent) {
  const clipboardData = e.clipboardData || (window as any).clipboardData;
  const items: DataTransferItem[] = Array.from(clipboardData.items);
  let copiedFiles: File[] = [];

  for (let i = 0; i < items.length; i++) {
    const originalFile = items[i].getAsFile();
    if (!originalFile) continue; // 跳过非文件项

    let targetFile: File;
    if (originalFile.name.includes('image')) {
      // 基于原文件创建新File，替换文件名
      targetFile = new File([originalFile], this.getScreenshotFilename(), {
        type: originalFile.type,
        lastModified: originalFile.lastModified
      });
    } else {
      targetFile = originalFile;
    }
    copiedFiles.push(targetFile);
  }

  this.files = this.concat(copiedFiles);
}

private getScreenshotFilename(): string {
  return `Screenshot_${formatDate(new Date(), 'yymmddHHMMss', DATE_LOCALE)}`;
}