验证文件是否损坏/损坏

Question

我在执行一项任务时遇到问题，即在 Angular (TypeScript) 中实现代码时遇到问题，该代码将验证文件（主要是 png/jpg，但最好是任何类型）在无论如何。

不幸的是，我无法上传损坏文件的示例，因为 StackOverflow 正确验证了这种情况，但是通过将 png/jpg 文件作为文本打开（例如，通过 Visual Studio 代码）并更改某些文本，可以轻松创建损坏的文件。

此时我尝试通过输入类型无线电中的（更改）方法来验证这种情况：

<input type="file" name="file" accept=".png, .jpg" (change)="onFileSelected($event)" required> 但我真的不知道该怎么做。

非常感谢您的任何帮助

Answer 1

我认为我们可以在

img

 标签中渲染图像，该标签具有 

onerror

 或 

(error)

 事件，这可以发出无效图像的信号，我们可以显示相同的错误消息。

TS：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  fileToUpload: any;
  imageUrl: any;
  invalid = false;
  handleFileInput(file: FileList) {
    this.invalid = false;
    this.fileToUpload = file.item(0);

    //Show image preview
    let reader = new FileReader();
    reader.onload = (event: any) => {
      this.imageUrl = event.target.result;
    };
    reader.readAsDataURL(this.fileToUpload);
  }
}

HTML：

<hello name="{{ name }}"></hello>
<input #Image type="file" (change)="handleFileInput($event.target.files)" />
<img
  width="100%"
  *ngIf="imageUrl"
  [src]="imageUrl"
  class="image"
  (error)="invalid = true"
/>
<div *ngIf="invalid">The uploaded image is corrupted</div>

Stackblitz 演示