如果文件已经存在于javascript中，如何增加文件名

我已经在react项目中实现了拖放文件上传，所以每次将文件拖放到拖放区时，我都会获取文件并访问其名称和数据，然后使用javscript的FileReader和readAsDataURL将数据转换为base64，并更新状态，我需要将其发送到bakend

如果状态中已存在同名文件，如何在文件名后附加数字

例如：file1.csv或file2.csv

主要国家

this.state : {
     Files:[],
}

每次拖放文件时都会触发get的函数

   FileHandling = (files) => {
    files.forEach((file) => {
      const reader = new FileReader();

      reader.readAsDataURL(file);
      reader.onload = () => {

        const CompleteData= {
          fileData: reader.result,
          fileName: file.name,
        };
         this.setState({
             Files:[...this.state.Files, CompleteData]
            })
      };
    });
  };

您可以在之前检查this.state.Files。这里可以使用递归函数。假设您加载了一个名为export.csv的文件。第二个是export.csv，在export_1.csv中转换。但是在第三个名为export.csv的文件上，验证将在export上完成，导致export_1=>错误！ 最好的办法是：

const checkNameOfTheFile = (newFileName) => {
    // Ex 'export.csv'
    const counter = this.state.Files.filter(f => f.fileName === newFileName).length;
    // If counter >= 2, an error has already been passed to the files because it means
    // 2 files have the same name
    if (counter >= 2) {
        throw 'Error duplicate name already present';
    }
    if (counter === 0) {
        return newFileName
    }
    if (counter === 1) {
        const newName = `${newFileName.split('.')[0]}_${counter}.${newFileName.split('.')[1]}`;
        // Return export_1.csv;
        return checkNameOfTheFile(newName);
        // We need to check if export_1.csv has not been already taken.
        // If so, the new name would be export_1_1.csv, not really pretty but it can be changed easily in this function
    }
};


const CompleteData= {
    fileData: reader.result,
    fileName: checkNameOfTheFile(file.name),
};

---

确定是否存在匹配的文件，如果存在，则确定该文件是否已经是重复文件，并且在末尾已经有一个数字。如果是，找到它的编号并递增。否则只需附加一个“1”。如果没有匹配的文件，请不要执行任何操作

FileHandling = (files) => {
files.forEach((file) => {
  const reader = new FileReader();

  reader.readAsDataURL(file);
  reader.onload = () => {
    let existingFiles = this.state.Files.filter(x=>x.fileName==file.Name);
    let fileName = file.Name;
    if(existingFiles.length > 0) {
      let oldFileName = existingFiles[0].split('.')[0];
      let oldFileMatchNumberMatch = oldFileName.match(/\d+$/);
      let fileNumber = (oldFileMatchNumberMatch) parseInt(oldFileMatchNumberMatch[0], 10) : 1;
      fileName = file.Name + fileNumber; //if file.Name has an extension, you'll need to split, add the number to the end of the 0'th element, and rejoin it
    }

    const CompleteData= {
      fileData: reader.result,
      fileName: file.name,
    };
     this.setState({
         Files:[...this.state.Files, CompleteData]
        })
  };
});

---

在线条上创建任何您想要的图案，并添加注释

const getUniqueName=fileName，index=0=>{ 让checkName=fileName，ext=； ifindex{ ifcheckName.indexOf'.>-1{ 让tokens=checkName.split'.'；ext='..+tokens.pop； checkName=tokens.join'.'； } //在这里做任何图案 checkName=`${checkName}${index}${ext}`； } const name exists=this.state.Files.filterf=>f.fileName===checkName.length>0； 返回名称是否存在？getUniqueNamefileName，索引+1:checkName； } FileHandling=文件=>{ files.forEachfile=>{ const reader=新文件读取器； reader.readAsDataURLfile； reader.onload==>{ 常量完成数据={ fileData:reader.result， 文件名：getUniqueNamefile.name， }; 这是我的国家{ 文件：[…this.state.Files，CompleteData] } }; }; };

---

您不能检查一下文件数组是否已经包含文件名吗？如果是的话，请修改文件名？如何使用javascript进行修改？我正在将对象CompletedData发送到数组，并尝试使用includes方法，但它不起作用。该方法工作正常：，但这里唯一的问题是每次计数器都将为counter=0。因此，每当添加重复文件时，文件名将是例如：file_1.csv，file_1.csv你是对的，我写得太快了。我提出一个更正我意识到一个例子会导致一个错误@jarivak，这里有一个新的解决方案不幸的是，它给了我一个错误，RangeError：最大调用堆栈大小超出了您可以共享当前状态的范围。Files和file.name-我可以调试解决方案。它有一个递归方法，我理解它如何在10000个同名文件上失败，但我不认为这是你的情况。如果您修改了模板，也可以将其发送给我。我想可能存在语法错误@let fileNumber=oldFileMatchNumberMatch parseIntoldFileMatchNumberMatch[0]，10:1；