Ionic（Android）中如何强制HTML文件选择器返回原始文件名？

首先咱们先理清楚核心逻辑：原生HTML <input type="file"> 本身就会直接返回文件的原始文件名，你遇到的问题大概率出在自定义的fileChooser.getFileInfo方法处理逻辑上。下面给你几个从基础到场景化的可行解决方案：

方案1：直接从原生File对象获取（最可靠） #

跳过自定义的fileChooser服务，直接从事件对象里提取原生File对象，它的name属性就是系统里的原始文件名，完全不受第三方逻辑干扰：

修改你的.ts文件中的onFileChoose方法：

onFileChoose($event): void {
  // 获取选中的第一个文件（允许多选的话可遍历files数组）
  const selectedFile = $event.target.files[0];
  if (selectedFile) {
    this.fileName = selectedFile.name; // 这里就是原始文件名
    this.fileSize = selectedFile.size;
    this.fileType = selectedFile.type;
    // 处理文件数据（如果需要转成可预览的格式）
    const reader = new FileReader();
    reader.onload = (e) => {
      this.fileData = this.sanitizeFileData(e.target.result);
    };
    reader.readAsDataURL(selectedFile);
  } else {
    this.helperProvider.createToast('未选择任何文件');
  }
}

对应的HTML无需改动，保持原代码即可：

<input #fileUpload type="file" name="myfile" (change)="onFileChoose($event)"/>

这个方案基于Web标准实现，在浏览器、Ionic WebView等所有环境下都能稳定获取原始文件名。

方案2：修复自定义fileChooser.getFileInfo方法 #

如果必须依赖fileChooser服务，那需要检查它的getFileInfo方法是否在处理过程中修改了文件名。比如有些自定义逻辑会为了存储/传输方便重命名文件，你需要调整代码保留原始名称：

假设你的fileChooser服务里的方法是类似这样的，修改其中的文件名赋值逻辑：

getFileInfo(event): Promise<any> {
  return new Promise((resolve, reject) => {
    const file = event.target.files[0];
    // 错误示例：避免手动修改文件名
    // const modifiedName = 'processed_' + file.name;
    // 正确做法：直接使用原生file.name
    resolve({
      fileName: file.name, // 确保此处用原始文件名
      fileData: ..., // 其他数据处理逻辑保持不变
      fileSize: file.size,
      fileType: file.type
    });
  });
}

只要保证fileName字段直接取自file.name，就能拿到原始文件名。

方案3：针对Ionic原生插件场景的处理 #

如果你的fileChooser是基于Cordova文件选择插件（比如cordova-plugin-filechooser），部分场景下插件会返回文件本地路径而非直接的文件名，这时候可以用cordova-plugin-file插件解析路径获取原始名称：

import { File } from '@ionic-native/file';

constructor(private file: File) {}

onFileChoose($event): void {
  // 假设插件返回的是文件本地路径
  const filePath = $event.target.files[0].path; // 或插件返回的路径字段
  this.file.resolveLocalFilesystemUrl(filePath)
    .then(fileEntry => {
      this.fileName = fileEntry.name; // 这里就是原始文件名
      // 后续文件信息处理逻辑
    })
    .catch(error => {
      this.helperProvider.createToast('获取文件信息失败：' + error.message);
    });
}

关键提醒 #

原生input[type=file]的File.name是浏览器/WebView从系统文件中直接读取的原始名称，不会被篡改，如果你遇到文件名异常的情况，优先排查自己的自定义处理逻辑（比如sanitizeFileData或fileChooser服务）是否存在重命名操作。

内容的提问来源于stack exchange，提问作者Setu Kumar Basak