web-dev-qa-db-ja.com

Angular2でファイルをアップロードする方法

画像とともにフォームを送信する必要があります。このコードを（複数の方法で）試しましたが、うまくいきませんでした。 Angular2を使用してファイルをアップロードするデモを実行している人がいますか。

component.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>

component.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');                    

                }
            );
      }
file-uploadangularangular2-forms
40
Mubashir

実際、Httpクラスは現時点ではサポートしていません。

そのためには、基礎となるXHRオブジェクトを活用する必要があります。

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);
    });
  }
}

詳細については、このplunkrを参照してください： https://plnkr.co/edit/ozZqbxIorjQW15BrDFrg?p=info 。

Angularリポジトリには、これに関する問題と保留中のPRがあります。

26
Thierry Templier

httpサービスファイル：

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;
  }
}

関数を呼び出す（コンポーネントファイル）：

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);
    });
}

HTMLコード：

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

OnChange（）メソッドの改善：

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

これはAngular 2バージョンです

Angular 2 アプリのいずれかにドラッグドロップファイル入力機能を実装する必要がありました。

このために ng-file-upload を選択しました。

ヘルプページ をたどろうとしました。提案どおり、 drag-upload-input.html ＆ drag-upload-input.component.ts を次のように実装しました。

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;
  }
}

app.module.ts は次のようにFileUploadModuleを持っています：

// 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 { }

systemjs.config.js は次のようになります。

(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);

ソース

0
student