如何使用angularjs2上传文件(多部分) [英] How to upload files(multipart) using angularjs2
问题描述
angular2是否支持多部分表单提交,有可用的示例吗?
Do angular2 supports multipart form submit, any example available?
对此文档的任何链接都非常感谢
Any link to docs specific to this is much appreciated
请参阅来自尖角github的帖子 https://github.com/angular/angular/issues/6030
See post from angular github https://github.com/angular/angular/issues/6030
任何示例都展示了将FormData
作为http
的一部分发送,
Any example showcasing sending FormData
as part of http
,
以下是草稿代码,对我来说很好,但是想知道http
Below is a draft code which works fine for me but like to know if same supported in http
<input id="single_f_fileup" [(ngModel)]="model.image" type="file" (change)="selectFile($event)" name="single_fileup" />
ANGULAR2
selectFile($event): void {
var files = $event.target.files || $event.srcElement.files;
var file = files[0];
let formData = new FormData();
formData.append("single_fileup", file);
formData.append('key1', 'value1');
formData.append('key2', 'value2');
var req = new XMLHttpRequest();
req.open("POST", "/api/fileupload");
req.send(formData);
}
NODEJS 6.2
var multer = require('multer');
var storage = multer.memoryStorage();
var upload = multer({ storage: storage });
router.post('/api/fileupload', upload.single('single_fileup'), function(req, res, next){
console.log(req.body,req.file);
});
如何使以下代码起作用?
this.http.post('/api/fileupload', formData)
.map(this.extractData)
.catch(this.handleError);
推荐答案
示例代码片段传递包含图像的formData
Sample snippet to pass formData which contains image
https://gist.github.com/arciisine/ee57727e56cbc5e83739b2c24fd69658
https://github.com/angular/angular/issues/6030
import { Component, Input, AfterViewInit } from '@angular/core';
import { NgModel, DefaultValueAccessor, NgControl } from '@angular/forms';
import { Http, Headers, RequestOptions } from '@angular/http';
@Component({
selector: 'app-file-uploader',
template: '<input type="file" (change)="updated($event);">',
providers: [NgModel, DefaultValueAccessor]
})
export class FileUploaderComponent implements AfterViewInit {
static ROOT = '/rest/asset';
@Input() private companyId: string = '';
private value: string;
private changeListener: Function;
constructor(private http: Http, private input: NgControl) {
this.input.valueAccessor = this;
}
ngAfterViewInit() {
}
writeValue(obj: any): void {
this.value = obj;
}
registerOnChange(fn: any): void {
this.changeListener = fn;
}
registerOnTouched(fn: any): void {
}
updated($event) {
const files = $event.target.files || $event.srcElement.files;
const file = files[0];
const formData = new FormData();
formData.append('file', file);
const headers = new Headers({});
let options = new RequestOptions({ headers });
let url = FileUploaderComponent.ROOT + (this.companyId ? '/' + this.companyId : '');
this.http.post(url, formData, options).subscribe(res => {
let body = res.json();
this.value = body.filename;
if (this.changeListener) {
this.changeListener(this.value);
}
});
}
}
这篇关于如何使用angularjs2上传文件(多部分)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!