ngx-uploaderモジュールを使用してs3バケットにアップロードした後で画像ファイルを開くことができません

Question

Angular2 +でpresigned URLを使用してngx-uploaderモジュールを使用してs3に画像をアップロードしています。 「エラー解釈JPEG画像ファイル（未JPEG：ここ

は、私のコードのクライアント側は、私がアップロードした後ダウンロードして開いている画像しようとすると、私はこのメッセージを得た

import { Component, OnInit, Inject, EventEmitter } from '@angular/core'; 
 
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatSnackBar } from '@angular/material'; 
 
import { UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions, UploadProgress } from 'ngx-uploader'; 
 

 
@Component({ 
 
    selector: 'app-upload-dialog', 
 
    templateUrl: './upload-dialog.component.html', 
 
    styleUrls: ['./upload-dialog.component.scss'], 
 
}) 
 
export class UploadDialogComponent implements OnInit { 
 
    options: UploaderOptions; 
 
    
 
    uploadInput: EventEmitter<UploadInput>; 
 
    fileName: string; 
 
    constructor(
 
       public dialogRef:   MatDialogRef<UploadDialogComponent>, 
 
       @Inject(MAT_DIALOG_DATA) public data: any) { 
 
       
 
    } 
 

 
    ngOnInit() { 
 
    } 
 

 
    uploadFichier(output: UploadOutput): void { 
 
    if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') { 
 
     this.currentFile = output.file; 
 
     this.fileName = output.file.name; 
 
    } 
 
    // si l'upload est fini 
 
    if (output.type === 'done') { 
 

 
    // when upload done 
 
    } 
 
    } 
 

 
    saveFile() { 
 
    
 
     const respo = response.json(); 
 
     let event: UploadInput; 
 
     console.log(this.currentFile) 
 
     event = { 
 
      type: 'uploadFile', 
 
      file: this.currentFile, 
 
      url: 'url here', 
 
      method: 'PUT', 
 
      headers: {'Content-Type': this.currentFile.type} 
 
     }; 
 
     
 
     this.uploadInput.emit(event); 
 
     /** */ 
 
    
 
    } 
 

 
    cancel() { 
 
    const cancelEvent: UploadInput = { 
 
     type: 'cancelAll' 
 
    }; 
 
    this.uploadInput.emit(cancelEvent); 
 
    
 
    } 
 

 
}

<input id="add-scolaire" type="file" accept="image/x-png,image/gif,image/jpeg" 
 
       mat-icon-button 
 
       ngFileSelect 
 
       [options]="options" 
 
       (uploadOutput)="uploadFichier($event)" 
 
       [uploadInput]="uploadInput">

ですファイル：0x2d 0x2dで始まります） "。 問題は、ngx-uploaderが、ファイルヘッダーに関する追加情報を追加することによって、フォームデータメソッドを使用してファイルをアップロードすることです。

Answer 1

どのようにサーバー側でファイルを処理しますか？

ngx-uploaderはアップロードのためにmultipart/form-dataと共に動作します。

repo Demo Serverにサンプルサーバーがあります。