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

如您所見，我正在使用計算所得的屬性為每個蛋糕創建一個圖像名稱。 每個蛋糕我只需要一張圖片。 現在，當我去編輯我的CRUD頁面上的蛋糕時。 我想添加一個簡單的圖像上載，它將上載圖像（無需調整大小或縮略圖），但是我想強加計算出的屬性名稱。 換句話說：無論用戶用什么名字命名他們的照片，我的上傳代碼都會將其重命名為Cakes.Name（減去空格）+“。jpg”，然后將其保存為“〜Images / 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

您需要：

• 將類型file的input添加到表單中，
• 在表單元素上具有屬性enctype = "multipart/form-data"

然后將HttpPostedFileBase添加到模型中，其名稱與input的名稱相同。 然后， HttpPostedFileModelBinder將在調用操作之前從上載的文件填充model屬性。 請注意，我認為您可能應該在某個地方添加模型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));
           }

           ....
      }
}

Answer 2

最終，這里提供的代碼用於構建此小型演示，該演示使您可以將圖像上傳到文件系統並動態使用它們，而無需將任何值存儲到數據庫中。 但是，您將在Model類中將圖像文件位置的字符串作為字符串，該類使用約定和上載文件的命名來顯示。

我想將其上傳到github，看看是否有其他人可以幫助我制定出使用此思想的更好解決方案。 也考慮使其與MongoDB一起使用。

ASP.NET MVC 5具有計算屬性的圖像上載和刪除