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

时间:2018-12-16 11:02:52

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

我很难上传图片,然后在视图中显示它。我在这里浏览了很多帖子,由于某种原因,没有任何东西真正适合我。

图片已上传(在我的情况下保存在~/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 个答案:

答案 0 :(得分:2)

问题是您在for u in allUsers: if searchedHobby in u.hobbies.all(): user = [u] userHobbies = [] for hobby in u.hobbies.all(): userHobbies.append(hobby.name) user.append(userHobbies) response.append(user) data = serializers.serialize('json', response) 字段中存储了绝对路径,这就是为什么它在您的托管环境中不起作用的原因。更重要的是,您不需要ProductImageUrlProductImageUrl来处理图像。仅使用ProductImageName

执行以下操作:

您的ProductImageName模型应如下:

Product

然后在Controller方法中:

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

希望它会为您服务!谢谢。

答案 1 :(得分:1)

我会在您的视图中添加一个<base>标签,以便所有链接都相对于您的网站。然后,您根本不需要构建图像的路径。

举例来说,如果您的网站位于https://bestsiteever.com,则标签将如下所示:

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

您的路径将是:

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

答案 2 :(得分:0)

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

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

值得一试。

答案 3 :(得分:0)

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

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

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