Question

我有一个简单的文件输入，我想使用ElementRef和@ViewChild访问文件并将图像上传到服务器。

我获得了以下解决方案，该解决方案在Chrome和Firefox的最新版本中均能完美运行，但在Safari（v11.1）中却无法使用。

问题是在Safari中，输入的ElementRef不包含文件。当我在更改操作上控制台登录this.el.nativeElement.files.length时，其结果在Safari中为-1，在Chrome或Firefox中为1。关于这个问题有什么想法吗？

<input #fileInput (change)="fileUpload()" type="file" name="pic" accept="image/*">

在组件类中，我使用ViewChild引用文件输入。

 import {Component, ElementRef, ViewChild} from '@angular/core'
 @Component({
   selector: 'my-app',
   template: `
     <div>
      <form class="row" [formGroup]="changeAvatar" novalidate (ngSubmit)="sendChangeAvatarForm()">
            <input #fileInput 
                 formControlName="avatar" 
                 (change)="fileUpload()" 
                 type="file" 
                 name="pic" 
                 accept="image/*">
      </form>
   </div>
  `,
 })
 export class App {
  @ViewChild('fileInput') el:ElementRef;
  constructor() {
  } 
  get avatar() {
     return this.el.nativeElement.files[0];
  }
  fileUpload() {
    // Access the uploaded file through the ElementRef
    console.log(this.el.nativeElement.files.length);
    // http request to the backend with the file this.el.nativeElement.files[0]; 
  }
}

我正在使用Angular客户端1.7.4和Angular 5.2.0。

谢谢！

Answer 1

如果要按角度排列文件，则必须使用$ event对象获取文件

HTML

  <input  (change)="fileUpload($event.target.files) type="file" name="pic" accept="image/*">

TS

   fileUpload(files: File[]){
    console.log(files)
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file',f))

    this.http.post('https://file.io', formData, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }

示例：https://stackblitz.com/edit/angular-file-upload-cszfpp

Angular 5视图子引用在Safari（v 11.1）中不起作用

1 个答案: