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