angular7输入类型的文件上传不起作用 [英] angular7 input type file upload not working

问题描述

当前我正在使用角度7输入类型=文件"不工作.

Present i'm working angular angular 7 input type="file" not working.

Angular6正常工作.

Angular6 its working fine.

角度6提交输入文件类型数据

angular 6 submit the input file type data

我将获得像这样的字段列表

i will get field list like this

但是角度7只能得到这样的图像路径.

But angular 7 only get image path like this.

只有我将角度6更新为角度7，我才会收到此错误. 我不知道什么问题.

only i updated angular 6 to angular 7 i will get this error. what is the issue i don't know.

谢谢，

推荐答案

我在Angular7应用中有一个上传文档部分，这是工作示例:

I have a upload document section in my Angular7 app, here is working example:

example.component.html

<form [formGroup]="form">
<div class="form-group">
    <label>Select file to upload.</label>
    <input type="file" id="bannedList" (change)="onFileChange($event);" #fileInput>
</div>
</form>
<button type="button" (click)="onSubmit();" [disabled]="!fileInput.value" class="btn btn-success pull-right"><i class="fa fa-save fa-fw"></i> Upload File</button>

example.component.ts

import { Component, OnInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from "@angular/forms";

...

export class exampleUploadComponent implements OnInit, OnDestroy {
  public form: FormGroup;
  @ViewChild('fileInput', { read: ElementRef }) private fileInput: ElementRef;

...

  createForm() {
    this.form = this.fb.group({
      bannedList: null
    });
  }

  onFileChange(event) {
    this.uploadStatus = 0;
    if (event.target.files.length > 0) {
      let file = event.target.files[0];
      this.form.get('bannedList').setValue(file);
    }
  }

  private prepareSave(): any {
    let input = new FormData();
    input.append('bannedChequeCustomersFile', this.form.get('bannedList').value);
    return input;
  }

  onSubmit() {
    const formModel = this.prepareSave();
    this.uploadChequeSubscription = this.chequeOperationService.uploadBannedChequeList(formModel).subscribe(
      (res) => {
        console.log("res handler:", res);
      },
      (err) => {
        console.log("err handler:", err);
      }
    );
  }

我希望它会有所帮助，谢谢.

I hope it will help, thanks.

这篇关于angular7输入类型的文件上传不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！