如何上传文件中Angular2 [英] How to upload file in Angular2
本文介绍了如何上传文件中Angular2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要与图像一起提交表单。我已经试过这code（带多种方式），但我以前不为我工作。有没有使用angular2请帮我出有文件上传的工作演示的人。
component.html
＆LT;窗体类=形横角色=形式＆GT; ＆LT; DIV CLASS =表单组＆GT;
＆LT;标签类=控制标签COL-SM-4=MYNAME的风格=＆GT;名称＆LT;跨度类=星号＆GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;
＆LT; DIV CLASS =COL-SM-7＆GT;
＆LT; DIV＆GT;
＆LT;输入类型=文本级=表格控ID =MYNAME
[（ngModel）] =myfile.name＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签类=控制标签COL-SM-4=MYIMAGE＆GT;形象和LT; /标签＆gt;
＆LT; DIV CLASS =COL-SM-7＆GT;
＆LT; DIV＆GT;
＆LT;输入类型=文件（变化）=fileChangeEvent（$事件）占位符=上传文件.../＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT; DIV CLASS =TEXT-中心＆GT;
＆LT;按钮式=按钮（点击）=上传（）＆GT;＆上传LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
component.ts
MYFILE = {
名：Mubashshir
图片：''
} fileChangeEvent（的FileInput：任意）{
this.myfile.image = fileInput.target.files;
} 上传（）{
this.base_path_service.PostRequest（'http://128.199.190.109/api/school/schoolDetail/',this.myfile）
。订阅（
数据=＆GT; {
的console.log（提交的数据）;
}，
ERR =＆GT;的console.log（ERR）
（）=＆GT; {
的console.log（'认证完成'）; }
）;
}
解决方案
其实， HTTP 类不支持的时刻。
您需要利用底层的XHR对象做到这一点：
进口{}注射从'angular2 /核心;
从rxjs /接收进口{}观测;@Injectable（）
出口类UploadService {
构造函数（）{
this.progress $ = Observable.create（观察员= GT; {
this.progressObserver =观察者
}）。分享（）;
} 私人makeFileRequest（网址：字符串，则params：字符串[]，文件：文件[]）：可观察{
返回Observable.create（观察员= GT; {
让FORMDATA：FORMDATA =新FORMDATA（）
XHR：XMLHtt prequest =新XMLHtt prequest（）; 对于（让我= 0; I＆LT; files.length;我++）{
formData.append（上传[]，文件[I]，文件[I]。名称）;
} xhr.onreadystatechange =（）=＆GT; {
如果（xhr.readyState === 4）{
如果（xhr.status === 200）{
observer.next（JSON.parse（xhr.response））;
observer.complete（）;
}其他{
observer.error（xhr.response）;
}
}
}; xhr.upload.onprogress =（事件）=＆GT; {
this.progress = Math.round（event.loaded / event.total * 100）; this.progressObserver.next（this.progress）;
}; xhr.open（'POST'，网址，真实）;
xhr.send（FORMDATA）;
}）;
}
}
请参阅此plunkr了解详情： https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p =信息。
有一个问题，并在角回购对此挂起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屋！
查看全文
