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

Question

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

c#javascriptformsasp.net-mvc-5image-uploading

11

我有一个非常简单的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”，并保存到“〜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概念。

- Eric Bishard

我尝试过集成这个教程中的代码，但是在让它工作时遇到了麻烦。由于没有指令，只有代码，所以我可能做错了什么，或者代码需要更改以适应mvc5。目前我还没有实现。http://www.dotnet-tricks.com/Tutorial/mvc/WKNQ120113-How-to-upload-a-file-in-MVC4.html - Eric Bishard

寻找解决方案、教程等。 - Eric Bishard

请查看我的回答：https://dev59.com/Am435IYBdhLWcg3w0Trc#40990080 - Basheer AL-MOMANI

2个回答

1

这里提供的代码最终用于构建一个小型演示，允许您将图像上传到文件系统并动态使用它们，而不将任何值存储到数据库中。但是，您将在模型类中拥有指向图像文件位置的字符串，并使用上传文件的约定和命名来显示它们。

我想将其上传到Github，并查看是否可以得到其他人的帮助，以找到一个更好的解决方案，该方案使用这个想法。考虑使它也能与MongoDB一起使用。 ASP.NET MVC 5 Image Upload & Delete w/ Calculated Property

- Eric Bishard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tvanfosson · Accepted Answer

您需要：

在表单中添加一个类型为file的input，
在表单元素上具有属性enctype = "multipart/form-data"

然后在模型中添加与input名称相同的HttpPostedFileBase。然后，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));
           }

           ....
      }
}