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

Angular 2文件上传示例

3 个答案: