webentwicklung-frage-antwort-db.com.de

So laden Sie eine Datei in Angular2 hoch

Ich muss ein Formular zusammen mit dem Bild einreichen. Ich habe diesen Code (mit mehreren Möglichkeiten) ausprobiert, aber für mich nicht funktioniert. Gibt es jemanden, der eine funktionierende Demo zum Hochladen von Dateien mit angle2 hat? Helfen Sie mir bitte.

komponente.html

    <form class="form-horizontal" role="form" >

        <div class="form-group">
            <label class="control-label col-sm-4" for="myname" style="">Name<span class="asterisk">*</span></label>
            <div class="col-sm-7">
                <div>
                    <input type="text" class="form-control" id="myname"
                    [(ngModel)]="myfile.name">                        
                </div>                  
            </div>                               
        </div>        


        <div class="form-group">
            <label class="control-label col-sm-4" for="myimage">Image</label>
            <div class="col-sm-7">
                <div>
                    <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />                         
                </div>   
            </div>
        </div>


        <div class="form-group">        
        <div class="text-center">
            <button type="button" (click)="upload()">Upload</button>             
        </div>
        </div>
  </form>

komponente.ts

     myfile={
                "name":"Mubashshir",               
                "image":''
     }

     fileChangeEvent(fileInput: any){
        this.myfile.image = fileInput.target.files;        
     }

     upload(){
          this.base_path_service.PostRequest('http://128.199.190.109/api/school/schoolDetail/',this.myfile)
            .subscribe(
                data => {
                            console.log("data submitted");                        
                        },
                err => console.log(err),
                () =>{
                     console.log('Authentication Complete');                    

                }
            );
      }
39
Mubashir

Tatsächlich unterstützt die Http-Klasse dies derzeit nicht.

Dazu müssen Sie das zugrunde liegende XHR-Objekt nutzen:

import {Injectable} from 'angular2/core';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class UploadService {
  constructor () {
    this.progress$ = Observable.create(observer => {
      this.progressObserver = observer
    }).share();
  }

  private makeFileRequest (url: string, params: string[], files: File[]): Observable {
    return Observable.create(observer => {
      let formData: FormData = new FormData(),
        xhr: XMLHttpRequest = new XMLHttpRequest();

      for (let i = 0; i < files.length; i++) {
        formData.append("uploads[]", files[i], files[i].name);
      }

      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            observer.next(JSON.parse(xhr.response));
            observer.complete();
          } else {
            observer.error(xhr.response);
          }
        }
      };

      xhr.upload.onprogress = (event) => {
        this.progress = Math.round(event.loaded / event.total * 100);

        this.progressObserver.next(this.progress);
      };

      xhr.open('POST', url, true);
      xhr.send(formData);
    });
  }
}

Weitere Informationen finden Sie in diesem Programm: https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info .

Im Angular Repo gibt es ein Problem und eine ausstehende PR zu diesem Thema:

26

Ihre http-Dienstdatei:

import { Injectable } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';
import { Http, Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http";
import {Observable} from 'rxjs/Rx';
import { Constants } from './constants';
declare var $: any;

@Injectable()
export class HttpClient {
  requestUrl: string;
  responseData: any;
  handleError: any;

  constructor(private router: Router, 
  private http: Http, 
  private constants: Constants, 
  ) {
    this.http = http;
  }

  postWithFile (url: string, postData: any, files: File[]) {

    let headers = new Headers();
    let formData:FormData = new FormData();
    formData.append('files', files[0], files[0].name);
    // For multiple files
    // for (let i = 0; i < files.length; i++) {
    //     formData.append(`files[]`, files[i], files[i].name);
    // }

    if(postData !=="" && postData !== undefined && postData !==null){
      for (var property in postData) {
          if (postData.hasOwnProperty(property)) {
              formData.append(property, postData[property]);
          }
      }
    }
    var returnReponse = new Promise((resolve, reject) => {
      this.http.post(this.constants.root_dir + url, formData, {
        headers: headers
      }).subscribe(
          res => {
            this.responseData = res.json();
            resolve(this.responseData);
          },
          error => {
            this.router.navigate(['/login']);
            reject(error);
          }
      );
    });
    return returnReponse;
  }
}

Rufe deine Funktion (Komponentendatei) auf:

onChange(event) {
    let file = event.srcElement.files;
    let postData = {field1:"field1", field2:"field2"}; // Put your form data variable. This is only example.
    this._service.postWithFile(this.baseUrl + "add-update",postData,file).then(result => {
        console.log(result);
    });
}

Ihr HTML-Code:

<input type="file" class="form-control" name="documents" (change)="onChange($event)" [(ngModel)]="stock.documents" #documents="ngModel">
17
Bharat Chauhan

Verbesserte onChange () - Methode: 

file: File;
  onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];
        console.log(this.file);
    }
3
Ashish Doneriya

Hier ist die Angular 2-Version

Wir mussten die Drag-Drop-Funktion zur Eingabe von Dateien in einer unserer Angular 2 app implementieren.

Wir haben ng-file-upload dafür ausgewählt.

Wir haben versucht, der Hilfeseite zu folgen. Wie vorgeschlagen, implementiere drag-upload-input.html & drag-upload-input.component.ts wie folgt:

drag-upload-input.html

<!-- we only need single file upload -->
<input type="file" ng2FileSelect [uploader]="uploader" />

drag-upload-input.component.ts

import { Component } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';

// const URL = '/api/';
const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';

@Component({
  moduleId: module.id,
  selector: 'drag-upload-input',
  templateUrl: './drag-upload-input.html'
})
export class DragUploadInput {
  public uploader: FileUploader = new FileUploader({ url: URL });
  public hasBaseDropZoneOver: boolean = false;
  public hasAnotherDropZoneOver: boolean = false;

  public fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }

  public fileOverAnother(e: any): void {
    this.hasAnotherDropZoneOver = e;
  }
}

Die app.module.ts hat FileUploadModule wie folgt:

// File upload modules
import { FileUploadModule } from 'ng2-file-upload';
import { DragUploadInput } from './file-upload/drag-upload-input.component';

//other imports

@NgModule({
  imports: [ ... other imports
FileUploadModule
],
  declarations: [  ... other declarations
DragUploadInput],
  bootstrap: [AppComponent]
})
export class AppModule { }

Und der systemjs.config.js sieht so aus:

(function (global) {
  System.config({
    // map tells the System loader where to look for things
    map: {
      // other libraries
      'ng2-file-upload': 'node_modules/ng2-file-upload',
    },
    packages: {
      // other packages
      ng2-file-upload': {
        main: 'ng2-file-upload.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

Quelle

0
student