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