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

Question

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

如果状态中已经存在同名文件，如何在文件名后面加上数字？

例如:file(1).csv 或 file 2.csv

主要状态

this.state : {
     Files:[],
}

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

   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]
            })
      };
    });
  };

Answer 1

在行中添加您想要的任何图案并添加注释。

 const getUniqueName = (fileName, index = 0) => {
   let checkName = fileName, ext = '';
   if(index){
     if(checkName.indexOf('.') > -1){
       let tokens = checkName.split('.'); ext = '.' + tokens.pop();
       checkName = tokens.join('.');
     }

     // make any pattern here
     checkName = `${checkName} (${index})${ext}`; 
   }
   
   const nameExists = this.state.Files.filter(f=>f.fileName === checkName).length > 0;
   return nameExists ? getUniqueName(fileName, index + 1) : checkName;
 }

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

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