イオン2ブラウザからファイルをアップロード

Question

私はイオン2 PWAを持っているので、ブラウザで実行する必要があります。私は、ユーザーがサーバーにファイルをアップロードできるようにしたい。イオンネイティブのファイルチューザーはアンドロイド専用ですので、ブラウザで使用することはできません。ですから、私の考えはtype = "file"の入力フィールドを使うことでした。しかし、私の問題は、私はパスではなくファイル名を取得しているということです。ファイルをアップロードするにはパスが必要です。最初はngModelで試してから、イオンからのフォームビルダーで試しました。

TS：これは私のフォームビルダを使用してコードである

import {Component} from '@angular/core'; 
import {Validators, FormBuilder, FormGroup } from '@angular/forms'; 

@Component({ 
    selector: 'page-test', 
    templateUrl: 'test.html', 
}) 
export class TestPage { 

    private file : FormGroup; 

    constructor(private formBuilder: FormBuilder) { 
     this.file = this.formBuilder.group({ 
      image: [''] 
     }); 
    } 

    logForm(){ 
     console.log(this.file.value) 
    } 

} 

HTML：

... 
<ion-content padding> 
    <form [formGroup]="file" (ngSubmit)="logForm()"> 
     <input type="file" size="50" formControlName="image"> 
     <button ion-button type="submit">Submit</button> 
    </form> 
</ion-content> 

しかし、私が言ったように、コンソールはファイル名のみログに記録します。

オブジェクトを{image： "2970.jpg"}

"this.file"（.valueなし）を記録すると、ファイルオブジェクトやそのようなものが見つかりません。イオンブラウザアプリケーションでファイルパスを取得してサーバーにアップロードする方法はありますか？

Answer 1

あなたは既に解決策を見つけた場合、私は知らないが、私はとにかくそれを公開します...あなたは、任意の外部NPMモジュールを必要としない、このソリューションのために

。ここではその後

のsrc /コンポーネント/ファイルアップローダー/ファイルuploader.ts

以下のコードをコピーして貼り付け

$ ionic generate component file-uploader 

を実行して、新しいコンポーネントを

をステップ・バイ・ステップを作成しています

import { Component, ViewChild, ElementRef, Input } from '@angular/core'; 

import 'rxjs/add/operator/map'; 
import { Observable } from 'rxjs/Observable'; 
import { HttpClient } from '@angular/common/http'; 

/** 
* Usage 
* 
* <file-uploader [apiUrl]="apiUrl" [params]="uploadParams"></file-uploader> 
* 
* <file-uploader [apiUrl]="apiUrl" [params]="[{'key':'language_code', 'value': 'en'}]"></file-uploader> 
* 
*/ 

@Component({ 
selector: 'file-uploader', 
templateUrl: 'file-uploader.html' 
}) 
export class FileUploaderComponent 
{ 
    @ViewChild('file') fileInput: ElementRef; 

    @Input('apiUrl') apiUrl: string = null; 

    @Input('params') params: Array<{key: string, value: string}> = []; 

    @Input('buttonText') buttonText: string = 'Upload'; 

    @Input('buttonType') buttonType: 'button' | 'icon' = 'icon'; 

    @Input('icon') icon: string = 'cloud-upload'; 

    @Input('onUploadSuccess') onUploadSuccess: (file: File, response: any) => void 
     = function (file: File, response: any) { console.log(file); console.log(response); }; 

    @Input('onUploadError') onUploadError: (file: File) => void = function (error: any) { console.log(error) }; 

    fileToUpload: File = null; 

    constructor(private httpClient: HttpClient) 
    { 
    } 

    triggerFileInputClick() 
    { 
     this.fileInput.nativeElement.click(); 
    } 

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

     if (this.fileInput.nativeElement.value != '') 
     { 
      this.upload(); 
     } 
    } 

    upload() 
    { 
     const formData: FormData = new FormData(); 

     formData.append('file', this.fileToUpload, this.fileToUpload.name); 

     this.params.map(param => { 
      formData.append(param.key, param.value); 
     }); 

     let headers = {}; 

     this.httpClient 
      .post(this.apiUrl, formData, { headers: headers }) 
      // .map(() => { return true; }) 
      .subscribe(response => { 
       this.onUploadSuccess(this.fileToUpload, response); 

       this.fileInput.nativeElement.value = ''; 
      }, error => { 
       this.onUploadError(error); 
      }); 
    } 
} 

のsrc /コンポーネント/ファイルアップローダー/ファイルuploader.html

<div> 

    <input type="file" #file (change)="onFileInputChange($event.target.files)"> 

    <button *ngIf="buttonType == 'button'" ion-button (click)="triggerFileInputClick()">{{buttonText}}</button> 

    <ion-icon *ngIf="buttonType == 'icon'" name="cloud-upload" (click)="triggerFileInputClick()"></ion-icon> 

</div> 

のsrc /コンポーネント/ファイルアップローダー/ファイルuploader.scss

file-uploader { 
    [type=file] { 
     display: none; 
    } 
} 

のsrc /ページ/ホーム/ home.html

<file-uploader [apiUrl]="apiUrl" [params]="[{'key':'language_code', 'value': languageCode}]"></file-uploader> 

あなたが必要とするすべてのこれを行うには、コンポーネントをNgModuleにロードして使用します。

最後に言及すべきことは、未定義の属性に問題がある場合です。 apiUrlでは、ngOnInit（）メソッドで初期化する必要があります。

希望があれば