Téléchargement de fichier angulaire

Question

Je suis débutant pour Angular, je veux savoir comment créer une partie de téléchargement de Angular 5 File , je cherche un didacticiel ou un document, mais je ne vois rien nulle part. Une idée pour ça? Et j'essaye les fichiers ng4 mais ça ne marche pas pour Angular 5

Answer 1

Voici un exemple pour le fichier de téléchargement de api:

Étape 1: Modèle HTML (file-upload.component.html)

Définir simple balise input de type file. Ajouter une fonction à l' (change)-événement pour la manipulation de choisir les fichiers.

<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (change)="handleFileInput($event.target.files)">
</div>

Étape 2: Télécharger la Manipulation en caractères d'imprimerie (de téléchargement de fichiers.composante.ts)

Définir une variable par défaut pour le fichier sélectionné.

fileToUpload: File = null;

Créer la fonction que vous utilisez en (change)-événement de votre fichier d'entrée de la balise:

handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
}

Si vous aurez à gérer multifichier de sélection, que vous pouvez parcourir ce fichier tableau.

Maintenant créer les fichiers en fonction de téléchargement par vous appeler de téléchargement de fichiers.service:

uploadFileToActivity() {
    this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
      // do something, if upload success
      }, error => {
        console.log(error);
      });
  }

Étape 3: Fichier de Téléchargement de Service (téléchargement de fichiers.service.ts)

Par le téléchargement d'un fichier par la POSTE-la méthode que vous devez utiliser FormData, en raison de sorte que vous pouvez ajouter un fichier à la requête 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));
}

Donc, C'est très simple exemple, que j'utilise au quotidien dans mon travail.

Answer 2

De cette façon, j'implémente le fichier de téléchargement vers l'API Web dans le projet.

Je partage pour qui concerne.

 const formData: FormData = new FormData();
formData.append('Image', image, image.name);
formData.append('ComponentId', componentId);
return this.http.post('/api/dashboard/UploadImage', formData);
 

Pas à pas

API Web ASP.NET

 [HttpPost]
[Route("api/dashboard/UploadImage")]
public HttpResponseMessage UploadImage() 
{
    string imageName = null;
    var httpRequest = HttpContext.Current.Request;
    //Upload Image
    var postedFile = httpRequest.Files["Image"];
    //Create custom filename
    if (postedFile != null)
    {
        imageName = new String(Path.GetFileNameWithoutExtension(postedFile.FileName).Take(10).ToArray()).Replace(" ", "-");
        imageName = imageName + DateTime.Now.ToString("yymmssfff") + Path.GetExtension(postedFile.FileName);
        var filePath = HttpContext.Current.Server.MapPath("~/Images/" + imageName);
        postedFile.SaveAs(filePath);
    }
}
 

Formulaire HTML

 <form #imageForm=ngForm (ngSubmit)="OnSubmit(Image)">

    <img [src]="imageUrl" class="imgArea">
    <div class="image-upload">
        <label for="file-input">
            <img src="upload.jpg" />
        </label>

        <input id="file-input" #Image type="file" (change)="handleFileInput($event.target.files)" />
        <button type="submit" class="btn-large btn-submit" [disabled]="Image.value=='' || !imageForm.valid"><i
                class="material-icons">save</i></button>
    </div>
</form>
 

Fichier TS à utiliser l'API

 OnSubmit(Image) {
    this.dashboardService.uploadImage(this.componentId, this.fileToUpload).subscribe(
      data => {
        console.log('done');
        Image.value = null;
        this.imageUrl = "/assets/img/logo.png";
      }
    );
  }
 

Service TS

 uploadImage(componentId, image) {
        const formData: FormData = new FormData();
        formData.append('Image', image, image.name);
        formData.append('ComponentId', componentId);
        return this.http.post('/api/dashboard/UploadImage', formData);
    }
 

Answer 3

Très facile et la méthode la plus rapide est l'utilisation de ng2-de téléchargement de fichiers.

Installer ng2-téléchargement de fichier via npm. npm i ng2-file-upload --save

Au premier module d'importation dans le module.

import { FileUploadModule } from 'ng2-file-upload';

Add it to [imports] under @NgModule:
imports: [ ... FileUploadModule, ... ]

Balisage:

<input ng2FileSelect type="file" accept=".xml" [uploader]="uploader"/>

Dans votre commponent ts:

import { FileUploader } from 'ng2-file-upload';
...
uploader: FileUploader = new FileUploader({ url: "api/your_upload", removeAfterUpload: false, autoUpload: true });

Il est plus simple d'utilisation de ce. Pour connaître toute la puissance de ce voir démo

Answer 4

Ok, comme ce fil apparaît parmi les premiers résultats de google et pour les autres utilisateurs ayant la même question, vous n'avez pas à reivent la roue comme indiqué par trueboroda il est le ng2-chargement d'un fichier de bibliothèque qui simplifie ce processus de téléchargement d'un fichier angulaire 6 et 7 tout ce que vous devez faire est de:

Installer la dernière Angulaire de la CLI

yarn add global @angular/cli

Puis installer rx-compat pour problème de compatibilité avec la

npm install rxjs-compat --save

Installer ng2-téléchargement de fichier

npm install ng2-file-upload --save

Importation FileSelectDirective Directive dans votre module.

import { FileSelectDirective } from 'ng2-file-upload';

Add it to [declarations] under @NgModule:
declarations: [ ... FileSelectDirective , ... ]

Dans votre composante

import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
...

export class AppComponent implements OnInit {

   public uploader: FileUploader = new FileUploader({url: URL, itemAlias: 'photo'});
}

Modèle

<input type="file" name="photo" ng2FileSelect [uploader]="uploader" />

Pour mieux comprendre, vous pouvez consulter ce lien: Comment Uploader un Fichier Angulaire 6/7

Answer 5

Je suis à l'aide Angulaire 5.2.11, J'aime la solution fournie par Gregor Doroschenko, cependant j'ai remarqué que le fichier téléchargé est de zéro octets, j'ai dû faire un petit changement pour le faire fonctionner pour moi.

postFile(fileToUpload: File): Observable<boolean> {
  const endpoint = 'your-destination-url';
  return this.httpClient
    .post(endpoint, fileToUpload, { headers: yourHeadersConfig })
    .map(() => { return true; })
    .catch((e) => this.handleError(e));
}

Les lignes suivantes (formData) ne fonctionne pas pour moi.

const formData: FormData = new FormData();
formData.append('fileKey', fileToUpload, fileToUpload.name);

https://github.com/amitrke/ngrke/blob/master/src/app/services/fileupload.service.ts