我必须提交一个表格和图片.我已经尝试过这个代码(有多种方式)，但对我不起作用.有没有人有使用 angular2 上传文件的工作演示，请帮帮我.
component.html
<div class="form-group"><label class="control-label col-sm-4" for="myimage">Image</label><div class="col-sm-7"><div><input type="file" (change)="fileChangeEvent($event)" placeholder="上传文件..."/>
<div class="form-group"><div class="text-center"><button type="button" (click)="upload()">上传</button>
</表单>
component.ts
myfile={"name":"穆巴什希尔",图片":''}文件更改事件(文件输入:任何){this.myfile.image = fileInput.target.files;}上传(){this.base_path_service.PostRequest('http://128.199.190.109/api/school/schoolDetail/',this.myfile).订阅(数据 =>{console.log("提交的数据");},错误 =>控制台日志(错误)，() =>{console.log('身份验证完成');});}事实上，Http 类目前不支持.
您需要利用底层的 XHR 对象来做到这一点:
import {Injectable} from 'angular2/core';从 'rxjs/Rx' 导入 {Observable}；@Injectable()导出类 UploadService {构造函数(){this.progress$ = Observable.create(observer => {this.progressObserver = 观察者}).分享();}private makeFileRequest (url: string, params: string[], files: File[]): Observable {返回 Observable.create(观察者 => {让 formData: FormData = new FormData(),xhr: XMLHttpRequest = new XMLHttpRequest();for (let i = 0; i {如果(xhr.readyState === 4){如果(xhr.status === 200){观察者.next(JSON.parse(xhr.response))；观察者.完成()；} 别的 {观察者.错误(xhr.response)；}}};xhr.upload.onprogress = (事件) =>{this.progress = Math.round(event.loaded/event.total * 100);this.progressObserver.next(this.progress);};xhr.open('POST', url, true);xhr.send(formData);});}} 有关更多详细信息，请参阅此 plunkr:https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=信息.
Angular 存储库中有一个问题和一个悬而未决的 PR:
I have to submit a form along with image. i have tried this code (with multiple ways) but did't work for me. is there anyone having working demo of file uploading using angular2 please help me out.
component.html
<form class="form-horizontal" role="form" >
<div class="form-group">
<label class="control-label col-sm-4" for="myname" style="">Name<span class="asterisk">*</span></label>
<div class="col-sm-7">
<div>
<input type="text" class="form-control" id="myname"
[(ngModel)]="myfile.name">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="myimage">Image</label>
<div class="col-sm-7">
<div>
<input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />
</div>
</div>
</div>
<div class="form-group">
<div class="text-center">
<button type="button" (click)="upload()">Upload</button>
</div>
</div>
</form>
component.ts
myfile={
"name":"Mubashshir",
"image":''
}
fileChangeEvent(fileInput: any){
this.myfile.image = fileInput.target.files;
}
upload(){
this.base_path_service.PostRequest('http://128.199.190.109/api/school/schoolDetail/',this.myfile)
.subscribe(
data => {
console.log("data submitted");
},
err => console.log(err),
() =>{
console.log('Authentication Complete');
}
);
}
In fact, the Http class doesn't support that at the moment.
You need to leverage the underlying XHR object to do that:
import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Rx';
@Injectable()
export class UploadService {
constructor () {
this.progress$ = Observable.create(observer => {
this.progressObserver = observer
}).share();
}
private makeFileRequest (url: string, params: string[], files: File[]): Observable {
return Observable.create(observer => {
let formData: FormData = new FormData(),
xhr: XMLHttpRequest = new XMLHttpRequest();
for (let i = 0; i < files.length; i++) {
formData.append("uploads[]", files[i], files[i].name);
}
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
observer.next(JSON.parse(xhr.response));
observer.complete();
} else {
observer.error(xhr.response);
}
}
};
xhr.upload.onprogress = (event) => {
this.progress = Math.round(event.loaded / event.total * 100);
this.progressObserver.next(this.progress);
};
xhr.open('POST', url, true);
xhr.send(formData);
});
}
}
See this plunkr for more details: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info.
There is a an issue and a pending PR regarding this in the Angular repo:
这篇关于如何在Angular2中上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
