Bild mit angular2 auf asp.net Kern hochladen

Question

So habe ich asp.net Core-Anwendung mit eckigen2. Jetzt möchte ich ein Bild hochladen, und ich habe es geschafft, wenn ich es als Byte hochladen []. Aber dann kann ich nicht überprüfen, ob die Datei wirklich Bild im Backend ist, also habe ich versucht, nach anderen Lösungen zu suchen .. Ich fand dieses Blog über Datei-Upload: https://devblog.dymel.pl/2016/09/02/upload-file-image-angular2-aspnetcore/ aber es funktioniert nicht für mich ...

Für Datei-Upload ich benutze angular2 Bibliothek angular2-Bild-Upload, so dass mein html Teil hochladen von Bildern sieht wie folgt aus:

onFileChange(event: any) { 
    this.file = event.target.files[0]; 

    if (event.target.files && this.file) { 
     var reader = new FileReader(); 

     reader.onload = (event: any) => { 
      this.profilePicture = event.target.result; 
     } 
     reader.readAsDataURL(this.file); 
    } 
} 

onSaveChanges() { 
    this.isSaving = true; 
    this.country = this.state.user.country; 
    this.userService.userChange(this.firstName, this.lastName, this.country, this.file, this.currentPassword, this.newPassword).subscribe(success => { 
     this.state.user.profilePicture = this.profilePicture; 
     this.state.user.firstName = this.firstName; 
     this.state.user.lastName = this.lastName; 
     this.isSaving = false; 
     this.passwordError = false; 
     this.isSuccessful = true; 
     this.currentPassword = ''; 
     this.newPassword = ''; 
     this.newPasswordRepeat = ''; 
    }, error => { 
     this.isSaving = false; 
     this.passwordError = true; 
     this.passwordErrorMessage = error._body; 
    }); 
} 

mein angular2 api Anruf Aussehen:

<image-upload [max]="1" [buttonCaption]="'Browse'" [preview]="false" (change)="onFileChange($event)"></image-upload> 
<button (click)="onSaveChanges()" class="btn btn-primary float-left" type="submit">Save</button> 

dann mein angular2 Teil sieht wie folgt aus wie t sein:

userChange(firstName: string, lastName: string, country: string, file: File, oldPassword: string, newPassword: string) { 
    let input = new FormData(); 
    input.append("File", file); 

    var url = this.baseUrl + "updateUser"; 

    return this.http.post(url, { FirstName: firstName, LastName: lastName, Country: country, File: input, OldPassword: oldPassword, NewPassword: newPassword }); 
} 

meine asp.net Core-Controller (Hinweis, dass ich den Körper der Controller nicht angezeigt, weil sie irrelevant ist):

[HttpPost] 
public async Task<IActionResult> UpdateUser([FromBody]UserChange userChange) 
{ 
} 

UserChange Klasse:

public class UserChange 
{ 
    public string FirstName { get; set; } 

    public string LastName { get; set; } 

    public string Country { get; set; } 

    public IFormFile File { get; set; } 

    public string OldPassword { get; set; } 

    public string NewPassword { get; set; } 
} 

Die Sache ist, dass, wenn ich mein Bild einreiche, ich immer mein UserChange-Objekt als null bekomme. Als ich Bild als Byte [] hinzufügte, arbeitete es wie ein Charme, was ist das Problem ?? Warum bekomme ich immer null, auch wenn ich die Datei übergebe, die nicht null ist? Andere Sache, die ich sah, dass, wenn ich die Art von IFormFile ändere mein UserChange Objekt Formfile nicht mehr null ist, sondern nur Dateiparameter von Objekt wirft diesem Fehler

‚userChange.File.ContentDisposition‘ hat eine Ausnahme vom Typ ‚System.NullReferenceException‘

UPDATE 1

Irgendwie schaffte ich Datei zu asp.net-Controller mit dieser Antwort zu senden: File upload using Asp.Net Core Web API file is always null aber zu tun, so hatte ich eine andere Aktion zu erstellen, die keine Parameter hat, bu t wie Datei in meiner Situation zu senden ist immer noch unbekannt ...

Answer 1

Ich fand Ihre Post bei der Suche nach etwas Ähnliches, und begann auch mit der eckigen2-Bild-Upload-Bibliothek, sondern beschlossen, den einfachen Ansatz zuerst zu versuchen . Für meine Zwecke brauchte ich nur die Bilddatei byte [] (wird versuchen, Formularfelder für den Bildtitel und die Bildunterschrift als nächstes hinzuzufügen), und fand einige von dem, was Michael Dymel in seinem Blogbeitrag vorschlägt, sehr hilfreich und funktionierte. Trotzdem ist es dir nicht gelungen, deinen Ansatz zur Arbeit zu bringen, das hat mir sehr geholfen.

Wohin ich kam, war mit der Konfiguration der richtigen Routing, und für eine Weile sah es aus wie meine Datei wurde korrekt auf den eckigen Service abgeholt, aber war Null, wenn es um den "Upload" -Controller. Nachdem ich überprüft hatte, dass der Pfad vom Upload-Service und der Pfad, der im Attribut [Route ("/ api/upload")] des Controllers festgelegt wurde, identisch waren, wurde alles korrekt und ich konnte erfolgreich hochladen.Etwas anderes Problem, was Sie gehabt haben, aber das war für mich:

Meine hochladen Komponentenmethode:

addFile(): void { 
    let fi = this.fileInput.nativeElement; 
    if (fi.files && fi.files[0]) { 
     let fileToUpload = fi.files[0]; 

     if (fileToUpload) { 
      this.uploadService.upload(fileToUpload) 
      .subscribe(res => { 
       console.log(res); 
      }); 
     } 
     else 
      console.log("FileToUpload was null or undefined."); 
    } 
} 

Ruft die Upload-Service:

upload(fileToUpload: any) { 
     let input = new FormData(); 
     input.append("fileForController", fileToUpload); 
     return this.http.post("/api/upload", input); 
    } 

Welche Beiträge zum ‚hochladen 'ActionResult meines ImagesControllers, der so aussieht (Ich speichere mein Bild in einer Datenbank, daher ist die Variable' Pfad 'eigentlich überflüssig). Die ‚Bild‘ Objekt ist nur ein einfaches Modell für die URL, Titel, ImageFileContent und Caption Felder:

[HttpPost] 
[Route("/api/upload")] 
public async Task<IActionResult> Upload(IFormFile fileForController) 
{ 
    if (!ModelState.IsValid) 
    { 
     return BadRequest(ModelState); 
    } 

    if (fileForController == null) throw new Exception("File is null"); 
    if (fileForController.Length == 0) throw new Exception("File is empty"); 

    var theImage = new Image(); 
    var path = Path.Combine("~\\ClientApp\\app\\assets\\images\\", fileForController.FileName); 

    theImage.Url = path + fileForController.FileName; 
    theImage.Title = fileForController.Name + "_" + fileForController.FileName; 
    theImage.Caption = fileForController.Name + " and then a Surprice Caption"; 

    using (Stream stream = fileForController.OpenReadStream()) 
    { 
     using (var reader = new BinaryReader(stream)) 
     { 
      var fileContent = reader.ReadBytes((int)fileForController.Length); 

      theImage.ImageFileContent = fileContent; 
      _context.Images.Add(theImage); 

      try 
      { 
       await _context.SaveChangesAsync(); 
      } 
      catch (Exception ex) 
      { 
       throw new Exception(ex.Message); 
      } 
     } 
    } 
    return Ok(theImage); 
} 

Und meine HTML-Template-Felder waren fast genau so, wie pro Michael Dymel der Beitrag:

<form action="gallery" name="fileUploadForm" method="post" enctype="multipart/form-data"> 
    <div class="col-md-6"> 
     <input #fileInput type="file" title="Choose Image to upload" /> 
     <button (click)="addFile()" class="btn btn-success">Add</button> 
    </div> 
</form>