Télécharger l'image incluse dans le modèle MVC

J'ai le modèle suivant:

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; }

}

Je voudrais que l'utilisateur puisse entrer dans les détails de la photo puis après le modèle de la le contrôleur. Mon contrôleur de l'action est comme suit:

[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);
    }

Mon point de vue est comme suit:

@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>
}

La vue est affiché ok et permet à l'utilisateur de sélectionner un fichier à partir de leur disque local et entrez les autres détails du modèle.
Mon problème est que si le modèle est affiché sur le contrôleur ok, la Description, la Date et l'est actif drapeaux sont peuplées ok - les données de l'Image est nulle.

Quelqu'un pourrait s'il vous plaît laissez-moi savoir ce que j'ai besoin de changement, de sorte que le tableau d'octets pour la photo est inclus dans le modèle affiché sur le contrôleur?

OriginalL'auteur Rob Bowman | 2013-12-07

24

Le fichier d'entrée, à votre avis, a un nom uploadImages. Je ne peux pas voir une propriété de ce nom dans votre modèle de vue. Vous semblez avoir quelques ImageData propriété qui est un tableau d'octets, mais il ne semble pas être un champ de saisie avec ce nom dans votre vue.

C'est ce qui explique pourquoi vous obtenez la valeur null. Vous pouvez faire ce travail par le respect de la convention. Ainsi, par exemple, si vous avez l'intention d'avoir un champ de saisie de votre point de vue:
```
<input type="file" name="uploadImages" class="input-files" />
```
alors assurez-vous que vous avez une propriété sur votre modèle de vue avec le même nom. Et bien sûr, de type HttpPostedFileBase.
```
public HttpPostedFileBase UploadImages { get; set; }
```
Également à votre avis, assurez-vous que vous définissez le bon type de contenu de multipart/form-data:
```
@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
...
}
```
Probablement, vous pouvez aller à travers les blog suivant afin de mieux vous familiariser avec les bases de téléchargement de fichiers de travail dans ASP.NET MVC. J'ai aussi écrit un similaire réponse ici que vous pouvez consulter.

Donc, une fois que vous ajoutez le HttpPostedFileBase propriété avec la UploadImages nom de votre modèle d'affichage vous pouvez alors adapter les actions de votre contrôleur de lire le tableau d'octets et de le stocker votre ImageData propriété:
```
[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);
}
```
Maintenant garder à l'esprit que ce n'est absolument horrible solution. Ne jamais faire que dans une application réelle. Dans un correctement conçu application, vous aurez un modèle de vue que votre contrôleur de l'action prendra comme paramètre. Vous n'êtes jamais vas utiliser directement votre générée automatiquement EF modèle en tant que paramètre à votre contrôleur de l'action. Vous aurez un modèle de vue avec le HttpPostedFileBase de la propriété qui sera associée à votre modèle de domaine.

Donc dans un plan bien conçu application, vous aurez un PhotoViewModel modèle de vue de classe que votre contrôleur de l'action à prendre.

Une autre grande réponse merci Darin. Je vais créer un dédié au modèle de vue. J'ai été en utilisant un référentiel de projet pour cette solution mais j'ai trouvé que la couche d'abstraction supplémentaire vraiment compliqué mon moq ferais des tests unitaires.
Très belle réponse merci! +1
ne devrait pas être présent: photo.UploadImages.InputStream.Read

OriginalL'auteur Darin Dimitrov

Modifier cette ligne:

@using (Html.BeginForm())

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

Puis changement:

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

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

Ensuite modifier cette ligne:

 public byte[] ImageData { get; set; }

 public HttpPostedFileBase ImageData { get; set; }

Enfin, utiliser un code comme ceci à la lecture de l'image dans un tableau d'octets:

 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);
}

OriginalL'auteur acfrancis

Vue:

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

Contrôleur:

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

OriginalL'auteur joe

Vous devez vous connecter pour publier un commentaire.