JavaScript中根据已有文件名实现上传文件名自动递增的方法

核心思路 #

先拆分文件名的主体与扩展名，优先使用原始文件名；若已存在，则从数字1开始递增生成候选文件名，直到找到第一个未被使用的名称。

实现代码 #

// 已上传的文件名数组
const existingFiles = ["image1.png","image2.png","image3.png","image.png"];
// 待上传的新文件名
const newFileName = "image.png";

// 拆分文件名主体和扩展名
function splitFileName(fileName) {
  const dotPosition = fileName.lastIndexOf('.');
  // 处理无扩展名的情况
  if (dotPosition === -1) {
    return { base: fileName, ext: '' };
  }
  return {
    base: fileName.slice(0, dotPosition),
    ext: fileName.slice(dotPosition)
  };
}

// 生成唯一文件名
function getUniqueFileName(existingList, targetName) {
  const { base, ext } = splitFileName(targetName);
  
  // 原始文件名未被占用，直接返回
  if (!existingList.includes(targetName)) {
    return targetName;
  }

  let count = 1;
  let candidateName;
  // 循环生成候选名，直到找到未被使用的
  do {
    candidateName = `${base}${count}${ext}`;
    count++;
  } while (existingList.includes(candidateName));

  return candidateName;
}

// 测试调用
console.log(getUniqueFileName(existingFiles, newFileName)); // 输出: image4.png

代码说明 #

1. splitFileName函数：通过lastIndexOf定位扩展名的分隔点，拆分出文件名主体（如image.png中的image）和扩展名（如.png），同时兼容无扩展名的文件（如readme）。
2. getUniqueFileName函数：
   • 先检查原始文件名是否在已上传列表中，若不在则直接返回；
   • 若已存在，从数字1开始生成带序号的候选文件名，通过do-while循环逐一校验，直到找到第一个未被使用的名称。
3. 适配性：无论现有列表中的序号是连续还是跳跃（比如已有image10.png），该逻辑都会自动找到下一个可用的序号，无需额外处理。

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