1
我想在Firebase上传图片。但要做到这一点,我必须先获得文件。我怎样才能得到我的电脑的图像,例如,通过HTML?我试图做到这一点,但我不知道这是什么回报。帮我家伙...如何通过HTML的输入标签获取文件的引用? (Angular 2)
<input type="file" name="image" [(ngModel)]="myImage">
我想在Firebase上传图片。但要做到这一点,我必须先获得文件。我怎样才能得到我的电脑的图像,例如,通过HTML?我试图做到这一点,但我不知道这是什么回报。帮我家伙...如何通过HTML的输入标签获取文件的引用? (Angular 2)
<input type="file" name="image" [(ngModel)]="myImage">
可以使用ElementRef
引用DOM元素,然后从中提取元素参考上传的文件的数据。使用#variableName
来引用文件输入。
<input #fileInput (change)="fileUpload()" type="file" name="pic" accept="image/*">
在您的组件类中,使用ViewChild
引用文件输入。
import {Component, ElementRef, Renderer2, ViewChild} from '@angular/core'
@Component({
selector: 'my-app',
template: `
<div>
<h2>{{name}}</h2>
<input #fileInput (change)="fileUpload()" type="file" name="pic" accept="image/*">
</div>
`,
})
export class App {
name:string;
@ViewChild('fileInput') el:ElementRef;
constructor(private rd: Renderer2) {
this.name = `Angular : File Upload`
}
fileUpload() {
console.log(this.el);
// Access the uploaded file through the ElementRef
this.uploadedFile = this.el.nativeElement.files[0];
}
}
我已经创建了一个示例plunker here。
Awsome dude!非常感谢! – flpn