Bild hochladen enthalten im MVC-Modell

Ich habe Folgendes Modell:

public class Photo
{
    public int PhotoId { get; set; }
    public byte[] ImageData { get; set; }
    public DateTime DateUploaded { get; set; }
    public string Description { get; set; }
    public bool IsActive { get; set; }

}

Möchte ich dem Benutzer die Möglichkeit zu geben Sie die details für die Foto-dann poste das Modell der Steuerung. Meine controller-Aktion ist wie folgt:

[HttpPost]
    public ActionResult Create(WilhanWebsite.DomainClasses.Photo photo)
    {
        if (ModelState.IsValid)
        {
            photo.DateUploaded = DateTime.Now;
            _context.Photos.Add(photo);
            _context.SaveChanges();

            return RedirectToAction("Index");
        }
        //we only get here if there was a problem
        return View(photo);
    }

Meine Ansicht ist wie folgt:

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Photo</h4>
    <hr />
    @Html.ValidationSummary(true)

    <div class="form-group">
        @Html.LabelFor(model => model.ImageData, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <input type="file" name="uploadImages" class="input-files" />
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.DateUploaded, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DateUploaded)
            @Html.ValidationMessageFor(model => model.DateUploaded)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.IsActive, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.IsActive)
            @Html.ValidationMessageFor(model => model.IsActive)
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}

Ansicht wird angezeigt ok und erlaubt dem Benutzer, wählen Sie eine Datei von Ihrem lokalen Datenträger aus und tragen Sie die weiteren details der Modelle.
Mein problem ist, dass, obwohl das Modell gepostet ist der controller ok, die Beschreibung, das Datum und die IsActive-flags aufgefüllt werden ok - die Bild-Daten null ist.

Könnte jemand bitte lassen Sie mich wissen, was ich ändern muss, so dass das byte-array für das Foto wird in das Modell aufgenommen wurden geschrieben, um den controller?

InformationsquelleAutor der Frage Rob Bowman | 2013-12-07

23

Die input-Datei in der Ansicht hat einen Namen uploadImages. Ich kann nicht sehen, eine Eigenschaft mit diesem Namen in der Ansicht Modell. Sie scheinen einige ImageData Eigenschaft, die ein byte-array, aber es scheint nicht zu einem entsprechenden input-Feld mit diesem Namen in Ihrem Blick.

Dies erklärt, warum man null. Sie könnte diese Arbeit durch die Einhaltung der Konvention. So zum Beispiel, wenn Sie die Absicht haben, solch ein input-Feld in den Blick:
```
<input type="file" name="uploadImages" class="input-files" />
```
dann stellen Sie sicher, dass Sie eine Immobilie haben, die Sie auf Ihrem view-Modell mit dem gleichen Namen. Und natürlich der Typ HttpPostedFileBase.
```
public HttpPostedFileBase UploadImages { get; set; }
```
Auch Ihrer Ansicht stellen Sie sicher, dass Sie den ordnungsgemäßen Inhaltstyp multipart/form-data:
```
@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    ...
}
```
Sie wahrscheinlich wollen, gehen Sie durch die folgenden blog-postum besser machen Sie sich vertraut mit den Grundlagen, wie das hochladen von Dateien in ASP.NET MVC. Ich habe auch geschrieben,ähnliche Antwort hierdass Sie vielleicht zu konsultieren.

Also, wenn Sie fügen Sie die HttpPostedFileBase Eigenschaft mit der UploadImages Namen im view-Modell, das Sie sich Ihren controller-action zu Lesen, das byte-array und speichern Sie Ihre ImageData Eigenschaft:
```
[HttpPost]
public ActionResult Create(WilhanWebsite.DomainClasses.Photo photo)
{
    if (ModelState.IsValid)
    {
        photo.DateUploaded = DateTime.Now;
        photo.ImageData = new byte[photo.UploadImages.ContentLength];
        photo.UploadImages.Read(photo.ImageData, 0, photo.ImageData.Length);

        _context.Photos.Add(photo);
        _context.SaveChanges();

        return RedirectToAction("Index");
    }

    //we only get here if there was a problem
    return View(photo);
}
```
Nun Bedenken, dass das ist eine absolut schreckliche Lösung. Nie tun, dass in einer realen Anwendung. In einer richtig entworfenen Anwendung haben Sie einen Blick Modell, das die controller-Aktion wird als parameter. Du bist nie gonna direkt verwenden Sie Ihre automatisch generierte EF-Modell als parameter in der controller-action. Haben Sie einen Blick auf das Modell mit der HttpPostedFileBase Eigenschaft, die gemappt werden, um Ihre domain Modell.

Also in einem richtig entworfenen Anwendung haben Sie eine PhotoViewModel view-model-Klasse, die Ihre controller-Aktion wird.

InformationsquelleAutor der Antwort Darin Dimitrov

Ändern Sie diese Zeile:

@using (Html.BeginForm())

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))

Dann ändern:

<input type="file" name="uploadImages" class="input-files" />

<input type="file" name="ImageData" class="input-files" />

Dann ändern Sie diese Zeile:

 public byte[] ImageData { get; set; }

 public HttpPostedFileBase ImageData { get; set; }

Schließlich, verwenden Sie code wie diesen zu Lesen, das Bild in ein byte-array:

 var bs = new byte[ImageData.ContentLength];
 using (var fs = ImageData.InputStream)
 {
     var offset = 0;
     do
     {
         offset += fs.Read(bs, offset, bs.Length - offset);
     } while (offset < bs.Length);
 }

InformationsquelleAutor der Antwort acfrancis

Anzeigen:

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
   ...
   <input type="file" id="ImageFile" name="ImageFile" .../>
   ...
}

Controller:

[HttpPost]
public ActionResult Create(Photo photo, HttpPostedFileBase ImageFile)
{
    byte[] buf = new byte[ImageFile.ContentLength];
    ImageFile.InputStream.Read(buf, 0, buf.Length);
    photo.ImageData = buf;
    ...
}

InformationsquelleAutor der Antwort joe

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.