web-dev-qa-db-ja.com

Angular 2 + TypeScript +ファイルのアップロード

私はangular2プロジェクトを作成しています。このプロジェクトでは、ファイルをアップロードし、いくつかのパラメーターをクライアントからサーバー（Spring Rest Server）に送信する必要があります。私はFormdataインターフェイスを試しましたが、ファイル（event.srcElement.filesから作成されたファイルオブジェクト）を追加し、そのオブジェクトをコンソールにロギングすると、空のformdataオブジェクトが出力されます。サーバー側については、@ requestparam（ "file"）を使用してファイルをフェッチしています。誰かがこれについていくつかの助けを提供することができれば素晴らしいでしょう。

これは私のhtmlファイルのコードです

<input type="file" #uploadFile multiple="true" (change)="uploadFile($event)"/>

コンポーネントファイルはこんな感じ

  uploadFile(event:any){
    let file = event.target.files[0];
    let fileName = file.name;
    console.log(file)
    console.log(fileName)
    let formData = new FormData();
    formData.append('file',file);
    this.examService.uploadAnswer(formData);
}

およびインサービスファイル

uploadAnswer(formData:FormData){  
            console.log(formData)
            this.http.post(this.url+'/uploadanswer', formData)
            .map((response: Response) => {
                let res = response.json();
            Object.keys(res).forEach(name =>
                this.questions=res[name]
            );
            });
angulartypescriptfile-upload
8
parikshitcs0072

HTMLは次のようになります。

<input id="file-field" name="file-field" (change)="uploadFile($event)" type="file" accept=".png,.jpg,.jpeg">

したがって、コンポーネント内のファイルは次のようになります。

uploadFile(event) {
  let files = event.target.files;
  if (files.length > 0) {
    console.log(file); // You will see the file
    this.service.uploadFile(file);
  }
}

そして稼働中：

uploadFile(file) {
  let formData: FormData = new FormData();
  formData.append('file', file, file.name);

  this.http.post(url, formData, request_options)
}

次に、リクエストデータのファイルキーを使用してファイルを取得します。

7
Malik Shahzad