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

Posted 2023-03-31

【中文标题】ASP.Net MVC 5 图像上传到文件夹

【英文标题】：ASP.Net MVC 5 image upload to folder

【发布时间】：2014-05-02 16:02:18

【问题描述】：

我有一个非常简单的 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 概念的虚构网站中。

【问题讨论】：

我已尝试在本教程中集成代码，但无法使其正常工作，没有指令，只有代码，所以我可能做错了什么，或者可能需要为 mvc5 更改代码对现在我没有实施。 dotnet-tricks.com/Tutorial/mvc/…

正在寻找解决方案、教程等。

查看我的答案***.com/a/40990080/4251431

【参考方案1】：

您需要：

将file 类型的input 添加到您的表单中， 在您的表单元素上具有属性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));
           

           ....
      

【讨论】：

你给我的链接是完美的。实际上，我以前曾访问过该网站，并且发现它很有名。感谢您朝着正确的方向推进，并在 ID 上额外输入以使文件独一无二！当我得到这个工作并在我的教程中实现它时，我会为遇到这个问题的其他人发布完成的代码或教程！

我也找到了这个教程，我也会看看。 sampathloku.blogspot.com/2014/02/… 与其他教程不同，我发现它有关于如何使用 VS 2013 的分步指南。再次非常感谢您的帮助。

只是对我上面提供的 DropzoneJS 链接的简要说明。如果有人有兴趣，他们仍然应该首先阅读骄傲鹦鹉教程，因为 DropdownJS 教程只是向您展示了如何安装文件并在控制器中实现，但将保存部分完全打开，这是一件好事，但您需要知道您的选择是什么以及如何实现它们，Pride Parrot 教程很好地解释了这方面。

感谢 tvanfosson 的回答。刚刚为这个问题赢得了我的第一个银牌！

@tvanfosson！这太棒了，我能够使用您的解决方案解决文件上传问题。

【参考方案2】：

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

我想将这个上传到 github，看看我是否不能让其他人帮助我制定一个使用这个想法的更好的解决方案。考虑让它也与 MongoDB 一起工作。

ASP.NET MVC 5 Image Upload & Delete w/ Calculated Property