代码之家 › 专栏 › 技术社区 › xcelm

在ASP.NET MVC中上载和显示图像

entity-framework asp.net-mvc html c#

xcelm · 技术社区 · 5 年前

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

图片上传(在我的情况下保存在 ~/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>
...

4 回复 | 直到 5 年前

TanvirArjel 5 年前

问题是,您正在将绝对路径存储在 ProductImageUrl 这就是为什么它不能在您的宿主环境中工作的原因。更重要的是你不需要两者 产品制造商 和 ProductImageName 处理图像。仅使用 产品图像名称 .

做到如下:

你的 Product 模型应如下:

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

然后在控制器方法中:

[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>
}

希望它对你有用!谢谢您。

Crowcoder 5 年前

我会添加一个 <base> 标记到视图,以便所有链接都与网站相关。那么你根本不需要建立一条通往图像的道路。

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

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

你的道路是:

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

Mirko Acimovic 5 年前

如果将图像作为字节数组发布,则应能够将其转换为base64格式并在视图中显示:

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

值得一试。

Ihusaan Ahmed 5 年前

如果我错了,请纠正我,但字符串存储在 item.ProductImageUrl 是一条路径 c:\\.. 正确的?

Serv.MappAthas 提供服务器上的相对硬盘位置。如果你把那个地方 SRC 然后您请求浏览器在您的 局部的 硬盘驱动器。

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