在 ASP.NET MVC 中上传和显示图像答案

【问题标题】：Uploading and displaying image in ASP.NET MVC在 ASP.NET MVC 中上传和显示图像
【发布时间】：2018-12-16 20:57:20
【问题描述】：

我很难上传图片然后在我的视图中显示它。我在这里浏览了很多帖子，出于某种原因，没有什么对我真正有用。

图片已上传（在我的情况下保存在~/Content/Images，但未显示在视图中。整个项目已在 Azure 上发布。

请从验证上传文件是否真的是图片或处理图片大小等事情中抽象出来。

我的领域模型是：

public class Product
{
    ...
    public string ProductImageUrl { get; set; }
    ...
}

控制器 - 发布方法：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(/*[Bind(Include = "ProductId,ProductName,ProductDescription,ProductPrice, CategoryId, Quantity, picture")]*/ Product product, HttpPostedFileBase picture)
{
   if (ModelState.IsValid)
   {
        db.Products.Add(product);

        if (picture != null)
        {
             var originalFileName = Path.GetFileName(picture.FileName);
             string fileId = Guid.NewGuid().ToString().Replace("-", "");
             var path = Path.Combine(Server.MapPath("~/Content/Images/"), fileId + ".jpg");

             picture.SaveAs(path);

             product.ProductImageUrl = path;
             product.ProductImageName = fileId;

             db.SaveChanges();
        }

        db.SaveChanges();

        return RedirectToAction("Index");
     }

     return View(product);
}

我的看法是：

       @foreach (var item in Model)
        {
            <tr>
                <td>
                    <img src="@item.ProductImageUrl" />
                </td>
...

【问题讨论】：

您需要在带有 guid 的文件名中提供 .jpg 或 .png 等图像类型并将其保存在 ProductImageUrl 中
我试过了，但是没用
您能否在开发者工具的网络选项卡中检查此图像的请求。这很可能会告诉您为什么它没有显示。
@xcelm item.ProductImageUrl 生成的字符串是什么？
@Valkyrie - product.ProductImageUrl = path;

标签： c# html asp.net-mvc entity-framework

【解决方案1】：

问题是您将绝对路径存储在ProductImageUrl 字段中，这就是它在您的托管环境中不起作用的原因。更重要的是，您不需要ProductImageUrl 和ProductImageName 来处理图像。仅使用ProductImageName。

如下操作：

您的Product 模型应如下所示：

public class Product
{
    ...
    public string ProductImageName { get; set; }
    ...
}

然后在Controller方法中：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Product product, HttpPostedFileBase productImage)
{
   if (ModelState.IsValid)
   {
      if (productImage != null && productImage.ContentLength > 0)
      {
          var fileName = Guid.NewGuid().ToString().Replace("-", "") + "_" + Path.GetFileName(productImage.FileName);
          var path = Path.Combine(Server.MapPath("~/Content/Images/Product/"), fileName);

          productImage.SaveAs(path);
          product.ProductImageName = fileName;
      }

      db.Products.Add(product);
      await db.SaveChangesAsync();
      return RedirectToAction("Index");
   }

   return View(product);
}

然后在View中如下：

@foreach (var item in Model)
{
   <tr>
       <td>
           <img src="@Url.Content("~/Content/Images/Product/"+@item.ProductImageName)" />
       </td>
   <tr>
}

希望它对你有用！谢谢。

【讨论】：

很高兴看到它解决了您的问题！欢迎！

【解决方案2】：

我会在您的视图中添加一个<base> 标记，以便所有链接都与您的网站相关。那么你根本不需要构建图像的路径。

例如，如果您的网站位于https://bestsiteever.com，您的标签将如下所示：

<base href="https://bestsiteever.com" >

你的路径是：

$"/Content/Images/{fieldId}.jpg"

【讨论】：

【解决方案3】：

如果您将图像作为字节数组发布，您应该能够将其转换为 Base64 格式并显示在视图中：

<img src="data:image;base64,@Convert.ToBase64String(item.ProductImageUrl)" />

值得一试。

【讨论】：

【解决方案4】：

如果我错了，请纠正我，但存储在item.ProductImageUrl 中的字符串是类似c:\\.. 的路径，对吗？

Server.MapPath 给出服务器上的相对硬盘位置。如果您将该位置放在 src 中，那么您是在要求浏览器在您的 LOCAL 硬盘驱动器中查找该文件。

试试item.ProductImageUrl = "<url to your site>/Content/Images/" + fileId + ".jpg";。

【讨论】：