Amostra de envio Angular de 2 Ficheiros

por favor, Pode partilhar uma amostra simples de envio de ficheiros que transmite o básico dessa funcionalidade ao usar o Angular 2?

A pesquisa que fiz (estou a fazer) continua a borbulhar versões antigas de Angular. Neste ponto tudo o que eu estou tentando fazer é carregar um arquivo de imagem pequena em uma propriedade, ou armazenamento local, e tê-lo exibido na página web.

Imagino que implica o uso do HttpClient, mas como sou novo no Angular 2, é um desafio criar o início de como isto funciona sem se apoiar numa simples amostra.

Estou a tentar isto e não está a ter o efeito que esperava. Parece que me falta uma importação. Esta parte está apenas tentando obter o nome do arquivo para fora, não a imagem renderizada. Ele aparece usando [(ngModel)] não é uma opção, e eu devo recorrer para mudar o evento para obter o arquivo selecionado.

Componente

@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>
Author: drmssst, 2017-11-18
Source

3 answers

Tudo o que precisar para enviar ficheiros em Angular 2:

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

 0
Author: Iteration, 2017-11-18 19:20:31
Depois de uma fase difícil, consegui o que acho que pode ser considerado básico. Não há nenhuma tentativa de lidar com coisas como quando nenhuma imagem é selecionada, além de quando a página carrega e arquivo é Desconhecido.

Componente

@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>
 0
Author: drmssst, 2017-11-19 02:07:58

Pode usar esta resposta para enviar o ficheiro para o seu servidor:

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

Você pode então, por exemplo, enviá-lo para azure e mostrar a imagem através da ligação de armazenamento azure.

Se quiser livrar-se do facto de usar o ficheiro alterado, ainda que funcione, poderá escrever um processador de valores de controlo para as entradas de ficheiros, explicado aqui:

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

 0
Author: S. Robijns, 2017-11-19 09:10:02