Envio Angular De Ficheiros
Angular-5 File
upload part , i'm try to find any tutorial or doc, but I don't see anything anywhere, Any Idea for this? e eu estou tentando isso arquivos ng4 mas não funciona para Angular-5
3 answers
Aqui está um exemplo de trabalho para o envio de ficheiros para a api:
Passo 1: Modelo HTML (ficheiro-enviar.componente.html)
Defina a marca de entrada simples do tipo file
. Adicione uma função a (change)
- evento para lidar com a escolha dos ficheiros.
<div class="form-group">
<label for="file">Choose File</label>
<input type="file"
id="file"
(change)="handleFileInput($event.target.files)">
</div>
Passo 2: Processamento do envio em Script (envio de ficheiros.componente.ts)
Define uma variável predefinida para o ficheiro seleccionado.
fileToUpload: File = null;
Crie uma função que use em (change)
- evento da entrada do seu ficheiro marca:
handleFileInput(files: FileList) {
this.fileToUpload = files.item(0);
}
Se quiser lidar com a selecção multifila, então pode iterar através deste conjunto de ficheiros.
Agora Crie a função de envio de ficheiros, chamando-o de ficheiro-upload.serviço:uploadFileToActivity() {
this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
// do something, if upload success
}, error => {
console.log(error);
});
}
Passo 3: Serviço de envio de Ficheiros (ficheiro-envio.servico.ts)
Ao enviar um ficheiro através do método POST-method deverá usar FormData
, Porque assim poderá adicionar um ficheiro ao pedido http.
postFile(fileToUpload: File): Observable<boolean> {
const endpoint = 'your-destination-url';
const formData: FormData = new FormData();
formData.append('fileKey', fileToUpload, fileToUpload.name);
return this.httpClient
.post(endpoint, formData, { headers: yourHeadersConfig })
.map(() => { return true; })
.catch((e) => this.handleError(e));
}
Então, este é um exemplo de trabalho muito simples, que eu uso todos os dias no meu trabalho.
O método mais fácil e mais rápido está a usar ng2-file-upload.
Instale ng2-file-upload via npm. npm i ng2-file-upload --save
No primeiro módulo de importação no seu módulo.
import { FileUploadModule } from 'ng2-file-upload';
Add it to [imports] under @NgModule:
imports: [ ... FileUploadModule, ... ]
Marca:
<input ng2FileSelect type="file" accept=".xml" [uploader]="uploader"/>
No teu comando ts:
import { FileUploader } from 'ng2-file-upload';
...
uploader: FileUploader = new FileUploader({ url: "api/your_upload", removeAfterUpload: false, autoUpload: true });
É o uso mais simples disto. Para conhecer todo o poder disto veja demonstração
Tenta isto
Instalar
npm install primeng --save
Importar
import {FileUploadModule} from 'primeng/primeng';
Html
<p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
accept="image/*" auto="auto"></p-fileUpload>