angular7 输入类型文件上传不起作用 [英] angular7 input type file upload not working
问题描述
目前我正在使用 angular angular 7 input type="file" 不工作.
Angular6 工作正常.
angular 6 提交输入文件类型数据
我会得到这样的字段列表
但是 angular 7 只能得到这样的图像路径.
只有我将 angular 6 更新为 angular 7,我才会收到此错误.我不知道是什么问题.
谢谢,
我的 Angular7 应用中有一个上传文档部分,这里是工作示例:
example.component.html
</表单><button type="button" (click)="onSubmit();"[禁用]="!fileInput.value" class="btn btn-success pull-right"><i class="fa fa-save fa-fw"></i>上传文件
example.component.ts
import { Component, OnInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';从@angular/forms"导入 { FormBuilder, FormGroup };...导出类 exampleUploadComponent 实现 OnInit, OnDestroy {公共表单:FormGroup;@ViewChild('fileInput', { read: ElementRef }) 私有文件输入:ElementRef;...创建表单(){this.form = this.fb.group({禁止列表:空});}onFileChange(事件){this.uploadStatus = 0;if (event.target.files.length > 0) {让文件 = event.target.files[0];this.form.get('bannedList').setValue(file);}}私人准备保存():任何{让 input = new FormData();input.append('bannedChequeCustomersFile', this.form.get('bannedList').value);返回输入;}提交(){const formModel = this.prepareSave();this.uploadChequeSubscription = this.chequeOperationService.uploadBannedChequeList(formModel).subscribe((res) =>{console.log("res 处理程序:", res);},(错误) =>{console.log("错误处理程序:", err);});}
希望能帮到你,谢谢.
Present i'm working angular angular 7 input type="file" not working.
Angular6 its working fine.
angular 6 submit the input file type data
i will get field list like this
But angular 7 only get image path like this.
only i updated angular 6 to angular 7 i will get this error. what is the issue i don't know.
Thanks,
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屋!