Angular 2 File Upload示例

Question

請您分享一個簡單的文件上傳示例，以傳達使用Angular 2時此類功能的基礎嗎？

我所做的研究（正在做）一直在冒泡Angular的舊版本。 此時，我要做的就是將一個小的圖像文件加載到屬性或本地存儲中，並將其顯示在網頁上。

我想象這意味着使用HttpClient，但是由於我是Angular 2的新手，因此在不依靠簡單示例的情況下鼓起它的工作原理是一項挑戰。

我正在嘗試此方法，但沒有達到我期望的效果。 感覺好像我缺少導入。 此部分僅嘗試獲取文件名，而不顯示圖像。 它不是使用[[ngModel）]出現的，我必須訴諸更改事件來獲取所選文件。

零件

@Component({
    selector:'home-page'
    ,templateUrl:'./home.page.html'
})
export class HomePageComponent{
    CurrentFile:File;
    public FileChangeEvent(fileInput:any){
        this.CurrentFile = fileInput.target.files[0];
    }
}

html

<div>
    <input type="file" (change)="FileChangeEvent($event)">
    <div *ngIf="CurrentFile">
        <p>{{CurrentFile.name}}</p>
    </div>
</div>

Answer 1

在Angular 2中上傳文件所需的一切：

https://github.com/valor-software/ng2-file-upload

Answer 2

經過一番粗略的研究后，我得到了我認為可以視為基本知識的內容。 除了頁面加載的時間和文件未知之外，沒有嘗試處理諸如未選擇圖像的情況。

零件

@Component({
    selector:'home-page'
    ,templateUrl:'./home.page.html'
})
export class HomePageComponent{
    CurrentFile:File;
    ImageSource:string;

    public FileChangeEvent(fileInput:any){
        this.CurrentFile = fileInput.target.files[0];

        let reader = new FileReader();
        reader.onload = () => {
                this.ImageSource = reader.result;
            };
        reader.readAsDataURL(this.CurrentFile);
    }
}

的HTML

<div>
    <input type="file" (change)="FileChangeEvent($event)">
    <div *ngIf="CurrentFile">
        <img [src]="ImageSource">
    </div>
</div>

Answer 3

您可以使用以下答案將文件上傳到服務器：

https://stackoverflow.com/a/40216616/5413117

然后，您可以例如將其上傳到azure，並通過azure存儲鏈接顯示圖像。

如果您想擺脫使用文件更改事件的麻煩，盡管它可以工作，但是您可以為文件輸入編寫一個控制值訪問器，在此進行解釋：

https://stackoverflow.com/a/41938495/5413117