ASP.Net MVC 5图像上传到文件夹

Question

我有一个非常简单的MVC5应用程序,它有一个客户端的产品页面,我也在使用MVC 5中已经搭建的基本CRUD操作.

我有一个名为Cakes.cs的模型,因为客户卖蛋糕.很简单.以下是该模型的代码:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;

    namespace TastyCakes.Models
    {
        public class Cakes
        {
            public int CakesID { get; set; }
            public string Name { get; set; }
            public string Description { get; set; }
            public decimal Price { get; set; }

            public string CakeImage
            {
                get { return Name.Replace(" ", string.Empty) + ".jpg"; }
            }
        }
    }

如您所见,我正在使用计算属性为每个蛋糕创建一个图像名称.每个蛋糕我只需要1个图像.现在,当我在CRUD页面上编辑蛋糕时.我想添加一个简单的图像上传,它将上传图像(无需调整大小或缩略图)但我想强加计算的属性名称.换句话说:无论用户将照片命名为什么,我的上传代码都会将其重命名为Cakes.Name(减去任何空格)+".jpg",并将其保存为"~Image/Cakes".

我只要求上传到实际的编辑页面,所以此时已经创建了蛋糕.重命名文件所需的所有信息都应该可用,并且可以从"编辑"页面轻松使用.以下是我的编辑页面代码:

编辑页面:

@model TastyCakes.Models.Cakes

<div class="row">
    <div class="large-12 columns">
    <hgroup class="title">
        <h1>Edit Cakes</h1>
    </hgroup>

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

        <div class="form-horizontal">
            <hr />
            @Html.ValidationSummary(true)
            @Html.HiddenFor(model => model.CakesID)

            <div class="medium-12 column">
                @Html.LabelFor(model => model.Name)
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>

            <div class="medium-12 column">
                @Html.LabelFor(model => model.Description)
                @Html.EditorFor(model => model.Description)
                @Html.ValidationMessageFor(model => model.Description)
            </div>

            <div class="medium-12 column">
                @Html.LabelFor(model => model.Price)
                @Html.EditorFor(model => model.Price)
                @Html.ValidationMessageFor(model => model.Price)
            </div>

            <div class="medium-12 column">
                <input type="submit" value="Save" class="tiny button" /> 
                @Html.ActionLink("Back to List", "Index", null, new { @class = "tiny button" })
            </div>
        </div>
    }

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
    </div>
</div>

我已经回顾了一些html5和ASP.Net 4解决方案,但这太过分了.我想要的很简单.任何想法或正确方向的踢都将非常感激.我不仅将此代码用于客户网站,还包含在用于教授非常基本的MVC概念的虚构网站中.

Answer 1

你需要:

• 在表单中添加一个input类型file,
• 拥有表单元素的属性 enctype = "multipart/form-data"

然后HttpPostedFileBase在模型中添加一个与名称相同的名称input.然后,HttpPostedFileModelBinder在调用操作之前,将从上载的文件中填充模型属性.注意,我认为您应该在某个地方添加模型ID,可能作为路径元素,以保证图像路径中的唯一性,以便图像不会被意外覆盖.

在http://www.prideparrot.com/blog/archive/2012/8/uploading_and_returning_files上有一个相当完整的讨论

public class Cakes
{
    ...

    public HttpPostedFileBase UploadedFile { get; set; }

}

[HttpPost]
public ActionResult Edit(Cakes cake) // I'd probably use a view model here, not the domain model
{
      if (ModelState.IsValid)
      {
           if (cakes.UploadedFile != null)
           {
               cakes.UploadedFile.SaveAs(Path.Combine("path-to-images-for-this-cake", cakes.CakeImage));
           }

           ....
      }
}