Wie lade ich Dateien in asp.net core hoch?

Wie lade ich Dateien oder Bilder mit Asp.net MVC 6 mit einigen Modelldaten hoch? Beispiel, ich habe ein Formular wie dieses;

<form>
    <input type="file">
    <input type="text" placeholder="Image name...">
    <input type="text" placeholder="Image description...">
    <input type="submit" value="Submit">
</form>

Ich habe viele Tutorials zum Hochladen gelesen, aber es werden keine Daten wie im obigen Formular hochgeladen.

Auch gibt es eine Bibliothek für die Bildbearbeitung zum Ändern der Größe und für das Wasserzeichen von Bildern, die mit der Codeigniter-Bildbearbeitungsklasse identisch ist? https: //codeigniter.com/user_guide/libraries/image_lib.htm

 JohnOsborne07. Aug. 2018, 14:53
Scheint, dass dies vor kurzem veröffentlicht wurde -> docs.microsoft.com / de-de / aspnet / core / mvc / models /…

Antworten auf die Frage(4)

Sie können eine neue Eigenschaft vom Typ @ hinzufügIFormFile zu deinem Ansichtsmodell

public class CreatePost
{
   public string ImageCaption { set;get; }
   public string ImageDescription { set;get; }
   public IFormFile MyImage { set; get; }
}

und in Ihrer GET-Aktionsmethode erstellen wir ein Objekt dieses Ansichtsmodells und senden es an die Ansicht.

public IActionResult Create()
{
   return View(new CreatePost());
}

Nun in Ihrer Ansicht "Erstellen", die stark an unser Ansichtsmodell angelehnt ist, wird ein @ angezeigform tag mit demenctype Attribut auf @ geset"multipart/form-data"

@model CreatePost
<form asp-action="Create" enctype="multipart/form-data">   

    <input asp-for="ImageCaption"/>
    <input asp-for="ImageDescription"/>
    <input asp-for="MyImage"/>

    <input type="submit"/>
</form>

Und Ihre HttpPost-Aktion für die Bearbeitung des Formulars

[HttpPost]
public IActionResult Create(CreatePost model)
{
   var img = model.MyImage;
   var imgCaption = model.ImageCaption;

   //Getting file meta data
   var fileName = Path.GetFileName(model.MyImage.FileName);
   var contentType = model.MyImage.ContentType;

   // do something with the above data
   // to do : return something
}

Wenn Sie die Datei in ein Verzeichnis in Ihrer App hochladen möchten, sollten Sie @ verwendeIHostingEnvironment, um den Webroot-Pfad abzurufen. Hier ist ein Arbeitsbeispiel.

public class HomeController : Controller
{
    private readonly IHostingEnvironment hostingEnvironment;
    public HomeController(IHostingEnvironment environment)
    {
        hostingEnvironment = environment;
    }
    [HttpPost]
    public IActionResult Create(CreatePost model)
    {
        // do other validations on your model as needed
        if (model.MyImage != null)
        {
            var uniqueFileName = GetUniqueFileName(model.MyImage.FileName);
            var uploads = Path.Combine(hostingEnvironment.WebRootPath, "uploads");
            var filePath = Path.Combine(uploads,uniqueFileName);
            model.MyImage.CopyTo(new FileStream(filePath, FileMode.Create)); 

            //to do : Save uniqueFileName  to your db table   
        }
        // to do  : Return something
        return RedirectToAction("Index","Home");
    }
    private string GetUniqueFileName(string fileName)
    {
        fileName = Path.GetFileName(fileName);
        return  Path.GetFileNameWithoutExtension(fileName)
                  + "_" 
                  + Guid.NewGuid().ToString().Substring(0, 4) 
                  + Path.GetExtension(fileName);
    }
}

Dies speichert die Datei inuploads Ordner inwwwwroot -Verzeichnis Ihrer App mit einem zufälligen Dateinamen, der mit Hilfe von Guids generiert wurde (um das Überschreiben von Dateien mit demselben Namen zu verhindern)

Hier verwenden wir ein sehr einfachesGetUniqueName -Methode, bei der 4 Zeichen aus einer GUID an das Ende des Dateinamens angehängt werden, um die Datei eindeutig zu machen. Sie können die Methode aktualisieren, um sie nach Bedarf zu verfeinern.

Sollten Sie die vollständige URL des hochgeladenen Bildes in der Datenbank speichern?

Nein. Speichern Sie nicht die vollständige URL des Bildes in der Datenbank. Was ist, wenn Ihr Unternehmen morgen beschließt, Ihren Firmen- / Produktnamen von @ zu änderwww.thefacebook.com zuwww.facebook.com? Jetzt musst du alle URLs in der Tabelle reparieren!

Was solltest du aufbewahren?

Sie sollten den eindeutigen Dateinamen speichern, den Sie oben generiert haben dasuniqueFileName varibale wir oben verwendet), um den Dateinamen zu speichern. Wenn Sie das Bild wieder anzeigen möchten, können Sie diesen Wert (den Dateinamen) verwenden und die URL für das Bild erstellen.

Zum Beispiel können Sie dies in Ihrer Ansicht tun.

@{
    var imgFileName = "cats_46df.png";
}
<img src="~/uploads/@imgFileName"  alt="my img"/>

Ich habe gerade einen Bildnamen in @ hardcodieimgFileName Variable und verwendet das. Sie können jedoch den gespeicherten Dateinamen aus Ihrer Datenbank lesen und die Ansichtsmodelleigenschaft festlegen und diese verwenden. Etwas wi

<img src="~/uploads/@Model.FileName"  alt="my img"/>

Speichern des Bildes in Tabelle

Wenn Sie die Datei als bytearray / varbinary in Ihrer Datenbank speichern möchten, können Sie dasIFormFile Objekt zu Byte-Array wie folgt

private byte[] GetByteArrayFromImage(IFormFile file)
{
    using (var target = new MemoryStream())
    {
        file.CopyTo(target);
        return target.ToArray();
    }
}

Jetzt in Ihrer http-Post-Action-Methode können Sie diese Methode aufrufen, um das Byte-Array aus @ zu generiereIFormFile und speichere damit in deiner Tabelle. Im folgenden Beispiel wird versucht, ein Post-Entity-Objekt mit dem Entity-Framework zu speichern.

[HttpPost]
public IActionResult Create(CreatePost model)
{
    //Create an object of your entity class and map property values
    var post=new Post() { ImageCaption = model.ImageCaption };

    if (model.MyImage != null)
    {
       post.Image =  GetByteArrayFromImage(model.MyImage);
    }
    _context.Posts.Add(post);
    _context.SaveChanges();
    return RedirectToAction("Index","Home");
}
 gmesorio11. Jan. 2017, 19:01
Hi Shyju, ich habe dein Beispiel oben ausprobiert, aber es hat bei mir nicht funktioniert. Das Bild erhält die Create-Methode im CreatePost-Objekt als null (die anderen Eigenschaften sind korrekt ausgefüllt). Ich werde das weiter untersuchen und Sie wissen lassen, wenn ich etwas finde. Falls Sie Vorschläge haben, lassen Sie es mich bitte wissen.
 Shyju11. Jan. 2017, 19:01
hat Ihr Formularenctype="multipart/form-data" ?
 gmesorio11. Jan. 2017, 19:03
Ok, das wars! Das war schnell! Danke, Mann
 Dídac Punyet11. Jan. 2017, 19:54
Diese Lösung funktioniert bei mir nicht, wenn ich @ hinzufüenctype="multipart/form-data" zu meinem Formular. Irgendeine Idee, woran das liegen könnte? Die IFormFile ist immer null.
 Shyju11. Jan. 2017, 20:15
check ob deine immobilie ein @ hset;. Stellen Sie außerdem sicher, dass der Name der Eingabedatei mit Ihrem Eigenschaftsnamen übereinstimmt.

Sie können versuchen, unter Code

1- Modell oder Modell ansehen
public class UploadImage 
{
  public string ImageFile { get; set; }
  public string ImageName { get; set; }
  public string ImageDescription { get; set; }
}
2- Seite anzeigen
<form class="form-horizontal" asp-controller="Image" asp-action="UploadImage" method="POST" enctype="multipart/form-data">

<input type="file" asp-for="ImageFile">
<input type="text" asp-for="ImageName">
<input type="text" asp-for="ImageDescription">
</form>
3- Controller
 public class Image
    {

      private IHostingEnvironment _hostingEnv;
      public Image(IHostingEnvironment hostingEnv)
      {
         _hostingEnv = hostingEnv;
      }

      [HttpPost]
      public async Task<IActionResult> UploadImage(UploadImage model, IFormFile ImageFile)
      {
        if (ModelState.IsValid)
         {
        var filename = ContentDispositionHeaderValue.Parse(ImageFile.ContentDisposition).FileName.Trim('"');
        var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "images", ImageFile.FileName);
        using (System.IO.Stream stream = new FileStream(path, FileMode.Create))
         {
            await ImageFile.CopyToAsync(stream);
         }
          model.ImageFile = filename;
         _context.Add(model);
         }        
      }        
    }
 BerBar31. Dez. 2018, 17:45
code ist falsch. Es gibt keine Rückgabe für diese Aktion.

Ihre Antwort auf die Frage