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>
0
3 answers
Tudo o que precisar para enviar ficheiros em Angular 2:
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:
0
Author: S. Robijns, 2017-11-19 09:10:02