文件格式对称性验证

Question

我有一个案例，其中我有 3 个单独的文件上传单个输入。如果用户选择了图像格式文件（png，jpg，jpeg），我必须确保上传的文件不是重复文件，那么他/她必须选择图像格式的所有三个文件输入（png，jpg , jpeg)。

如果用户选择了pdf文件，那么他/她只需要上传pdf格式的文件。

所以任何一个用户都可以上传所有图像（png、jpg、jpeg）或 PDF，但不能同时上传。 我用过

.replace(/^.*\./, "").toLowerCase();

rejex 获取文件的文件扩展名，然后我使用许多 if else 条件来验证它，但它仍然无法正常工作。

//html

  <ng-container>
            <span>
        <label class="label1">
            <div>
                <span>
                    <img class="image1 " src="assets/images/upload.png " alt="img " width="30 " height="30 " />
                </span>
            <span style="cursor:pointer;">{{salary1}}</span>
            <span>
                    <input type="file" (change)="selectFileS1($event) " accept=".jpg, .jpeg, .png, .pdf ">
                </span>
            </div>
            </label>
            </span>
            <span>
        <label class="label1">
            <img class="image2 " src="assets/images/upload.png " alt="img " width="30 " height="30 " />

            <span style="cursor:pointer;">{{salary2}}</span>
            <input type="file" (change)="selectFileS2($event) " accept=".jpg, .jpeg, .png, .pdf ">
            </label>
            </span>
            <span>
        <label class="label1 ">
            <img class="image3 " src="assets/images/upload.png " alt="img " width="30 " height="30 " />
            <span style="cursor:pointer;">{{salary3}}</span>
            <input type="file" (change)="selectFileS3($event) " accept=".jpg, .jpeg, .png, .pdf ">
            </label>
            </span>
            <br>
        </ng-container>

//ts

selectMonth1 = [];
selectMonth2 = [];
selectMonth3 = [];
salary1  = 'Month / Combined';
salary2  = 'Month2';
salary3  = 'Month3';


 selectFileS1(event) {
    this.selectMonth1 = Array.from(event.target.files);
    console.log(this.selectMonth1);

   if(!this.validationMethod()) {
  this.salary1 = this.selectMonth1[0].name;
}

  }

 selectFileS2(event) {
    this.selectMonth2 = Array.from(event.target.files);
   if(!this.validationMethod()) {
 this.salary2 = this.selectMonth2[0].name;
}

}

selectFileS3(event) {
    this.selectMonth3 = Array.from(event.target.files);
 if(!this.validationMethod()) {
   this.salary3 = this.selectMonth3[0].name;
}

}


  validationMethod() {
    if(this.selectMonth1[0].name !==this.selectMonth2[0].name ||this.selectMonth2[0].name!==this.selectMonth3[0].name || this.selectMonth1[0].name !==this.selectMonth3[0].name) {
        const fileExtensionOfMonth1 = this.selectMonth1[0].name
          .replace(/^.*\./, "")
          .toLowerCase();
        console.log(fileExtensionOfMonth1);
        const fileExtensionOfMonth2 = this.selectMonth2[0].name
          .replace(/^.*\./, "")
          .toLowerCase();
        console.log(fileExtensionOfMonth2);
        const fileExtensionOfMonth3 = this.selectMonth3[0].name
          .replace(/^.*\./, "")
          .toLowerCase();
        console.log(fileExtensionOfMonth3);
        if (
          fileExtensionOfMonth1 === "png" ||
          fileExtensionOfMonth1 === "jpg" ||
          (fileExtensionOfMonth1 === "jpeg" &&
            fileExtensionOfMonth2 === "png") ||
          fileExtensionOfMonth2 === "jpg" ||
          fileExtensionOfMonth2 === "jpeg"
        ) {
          if (fileExtensionOfMonth3 === "pdf") {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
           return false;
          }
        } else if (
          fileExtensionOfMonth1 === "png" ||
          fileExtensionOfMonth1 === "jpg" ||
          (fileExtensionOfMonth1 === "jpeg" &&
            fileExtensionOfMonth3 === "png") ||
          fileExtensionOfMonth3 === "jpg" ||
          fileExtensionOfMonth3 === "jpeg"
        ) {
          if (fileExtensionOfMonth2 === "pdf") {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
            return false;
          }
        } else if (
          fileExtensionOfMonth2 === "png" ||
          fileExtensionOfMonth2 === "jpg" ||
          (fileExtensionOfMonth2 === "jpeg" &&
            fileExtensionOfMonth3 === "png") ||
          fileExtensionOfMonth3 === "jpg" ||
          fileExtensionOfMonth3 === "jpeg"
        ) {
          if (fileExtensionOfMonth1 === "pdf") {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
          }
           return false;
        } else if (fileExtensionOfMonth1 === "pdf") {
          if (
            fileExtensionOfMonth2 === "png" ||
            fileExtensionOfMonth2 === "jpg" ||
            (fileExtensionOfMonth2 === "jpeg" &&
              fileExtensionOfMonth3 === "png") ||
            fileExtensionOfMonth3 === "jpg" ||
            fileExtensionOfMonth3 === "jpeg"
          ) {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
            return false;
          }
        } else if (fileExtensionOfMonth2 === "pdf") {
          if (
            fileExtensionOfMonth1 === "png" ||
            fileExtensionOfMonth1 === "jpg" ||
            (fileExtensionOfMonth1 === "jpeg" &&
              fileExtensionOfMonth3 === "png") ||
            fileExtensionOfMonth3 === "jpg" ||
            fileExtensionOfMonth3 === "jpeg"
          ) {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
            return false;
          }
        } else if (fileExtensionOfMonth3 === "pdf") {
          if (
            fileExtensionOfMonth1 === "png" ||
            fileExtensionOfMonth1 === "jpg" ||
            (fileExtensionOfMonth1 === "jpeg" &&
              fileExtensionOfMonth2 === "png") ||
            fileExtensionOfMonth2 === "jpg" ||
            fileExtensionOfMonth2 === "jpeg"
          ) {
            this.selectMonth1.length = 0;
            this.selectMonth2.length = 0;
            this.selectMonth3.length = 0;
           this.toastr.info("","You can either upload images or pdfs but not a combination");
          }
           return false;
        }

    }

      }
                                                            }

Answer 1

让它变得简单。

<input type="file" (change)="selectFile($event)" [accept]="allowedExtensions">

export class MyComponent {
  allowedExtensions = 'image/*, application/pdf';

  extensions = {
    images: ['jpeg', 'jpg', 'png'], //etc
  };

  constructor(...) {}

  selectFile(event: Event) {
    const input = event.target as HTMLInputElement;
    const FL = input.files;
    const file = FL[0];
    this.setExtensions(file.name.split('.').slice(-1));
    // ... Your factorized logic
  }

  setExtensions(extension: string) {
    if (this.extensions.images.includes(extension)) { this.allowedExtensions = this.extensions.map(ext => `.${ext}`).join(','); }
    else if (extension === 'pdf') { this.allowedExtensions = 'application/pdf' }
    else { this.allowedExtensions = 'image/*, application/pdf'; }
  }
}

这当然可以完善，但这会给你一个大致的想法来做什么。