Bilddatei kann nach dem Hochladen in s3-Bucket mit dem Modul ngx-uploader nicht geöffnet werden

Question

Ich verwende das ngx-uploader-Modul, um ein Bild auf s3 hochzuladen, indem ich eine vordefinierte URL auf Angular2 + verwende.

Hier mein Code clientseitige

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">

ist Wenn ich versuche, und öffnen Bild nach dem Hochladen zum Download, bekam ich diese Meldung: „Fehler beim Interpretieren JPEG-Bilddatei (kein JPEG Datei: beginnt mit 0x2d 0x2d) ". Vielleicht ist das Problem, dass, ngx-Uploader-Datei mit der Formulardatenmethode hochladen, indem Sie zusätzliche Informationen über den Dateikopf hinzufügen.

Answer 1

Wie verarbeiten Sie die Datei auf der Serverseite?

ngx-uploader arbeitet mit multipart/form-data für den Upload.

Es gibt einen Beispielserver im Repo Demo Server.