如何在前端文件上传前修改用户输入的文件名称

安全阿岳

2026-10-5

前端修改上传图片文件名实现方案

浏览器原生File接口的name属性为只读属性，直接修改赋值不会生效，你可以基于原始文件的二进制内容、自定义文件名、原始文件MIME类型构造一个新的File实例，替换原始文件即可实现需求，完整实现代码如下：

const [getImageFile, setImageFile] = useState([]);

// 自定义文件名生成规则，可根据实际需求修改内部逻辑
const generateCustomFileName = (originalFile) => {
  // 提取原始文件后缀名
  const fileExt = originalFile.name.split('.').pop();
  // 示例命名规则：自定义前缀 + 13位时间戳 + 原始后缀
  return `custom_img_${Date.now()}.${fileExt}`;
};

const handleImageFile = e => {
  const originalFile = e.target.files[0];
  if (!originalFile) return;
  // 生成自定义文件名
  const customFileName = generateCustomFileName(originalFile);
  // 构造新的File对象，替换文件名
  const newFile = new File([originalFile], customFileName, {
    type: originalFile.type,
    lastModified: originalFile.lastModified
  });
  // 存储新构造的文件到状态中
  setImageFile([...getImageFile, newFile]);
};