c# - tag - ¿Cómo subir archivos en asp.net core?

upload file net core 2

Question

¿Cómo subir archivos o imágenes usando Asp.net MVC 6 con algunos datos del modelo? Ejemplo, tengo un formulario como este;

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

Leí muchos Tutoriales sobre cómo cargarlos, pero no veo nada subiéndolo con algunos datos como el formulario anterior.

Además, ¿hay alguna biblioteca para la manipulación de imágenes para cambiar el tamaño y Image Watermarking igual que la clase de manipulación de imágenes Codeigniter? ( https://codeigniter.com/user_guide/libraries/image_lib.html

Answer 1

puedes probar el código a continuación

1- modelo o vista modelo

public class UploadImage 
{
  public string ImageFile { get; set; }
  public string ImageName { get; set; }
  public string ImageDescription { get; set; }
}

2- Ver página

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

 public class Image
    {

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

      [HttpPost]
      public IActionResult UploadImage(UploadImage model, IFormFile ImageFile)
      {
        if (ModelState.IsValid)
         {
        var filename = ContentDispositionHeaderValue.Parse(ImageFile.ContentDisposition).FileName.Trim(''"'');
        var targetDirectory = Path.Combine(_hostingEnv.WebRootPath, string.Format("Common//Images//"));
        var savePath = Path.Combine(targetDirectory, filename);
        ImageFile.CopyTo(new FileStream(savePath, FileMode.Create));
        model.ImageFile = filename;
        _imageUploadAppService.UserCreate(model);
         }        
      }        
    }

Answer 2

Puede agregar una nueva propiedad de tipo IFormFile a su modelo de vista

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

y en tu acción GET

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

Ahora, en su vista Crear que está fuertemente tipada a nuestro modelo de vista, tenga una etiqueta de formulario que tenga la propiedad enctype establecida en "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>

Y su acción de HttpPost para manejar la publicación del formulario

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

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

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

Si desea cargar el archivo en algún directorio de su aplicación, debe usar IHostingEnvironment para obtener la ruta webroot. Aquí hay una muestra de trabajo.

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(vm.File.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 GetUniqueName(string fileName)
    {
        fileName = Path.GetFileName(fileName);
        return  Path.GetFileNameWithoutExtension(fileName)
                  + "_" 
                  + Guid.NewGuid().ToString().Substring(0, 4) 
                  + Path.GetExtension(fileName);
    }
}

Esto guardará el archivo en la carpeta de uploads dentro del directorio wwwwroot de su aplicación con un nombre de archivo aleatorio generado usando Guids (para evitar la sobrescritura de archivos con el mismo nombre)

Aquí estamos usando un método GetUniqueName muy simple que agregará 4 caracteres de un guid al final del nombre del archivo para hacerlo algo único. Puede actualizar el método para hacerlo más sofisticado según sea necesario.

¿Debería almacenar la URL completa en la imagen cargada en la base de datos?

No. No almacene la url completa en la imagen en la base de datos. ¿Qué pasa si mañana su empresa decide cambiar el nombre de su empresa / producto de www.thefacebook.com a www.facebook.com ? ¡Ahora tienes que arreglar todas las URL en la mesa!

¿Qué debería almacenar?

Debe almacenar el nombre de archivo único que generó anteriormente ( el uniqueFileName UniqueFileName que usamos arriba ) para almacenar el nombre del archivo. Cuando desee volver a mostrar la imagen, puede usar este valor (el nombre del archivo) y crear la url en la imagen.

Por ejemplo, puedes hacer esto en tu vista.

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

Acabo de codificar un nombre de imagen para la variable imgFileName y lo usé. Pero puede leer el nombre de archivo almacenado de su base de datos y establecerlo en su propiedad de modelo de vista y usar eso. Algo como

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

Almacenar la imagen en la mesa

Si desea guardar el archivo como bytearray / varbinary en su base de datos, puede convertir el objeto IFormFile en una matriz de bytes como esta

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

Ahora, en su método http post action, puede llamar a este método para generar la matriz de bytes de IFormFile y usar eso para guardar en su tabla. el ejemplo siguiente trata de guardar un objeto de entidad Post utilizando el marco de entidad.

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