博客

ASP.NET MVC解决上传图片脏数据的方法

  • Post category:C#

ASP.NET MVC解决上传图片脏数据的方法的完整攻略如下：

  1. 首先，在Model中定义一个byte[]类型的属性来存储图片数据。在Models文件夹中，打开要添加图片属性的类，然后以下代码：
public class MyModel
{
    public byte[] ImageData { get; set; }
}
  1. 接下来，在View中添加一个文件上传控件，并将其与Model中的图片属性绑定。在Views文件夹，打开要添加文件上传控件的视图，然后添加以下代码：
<div class="form-group">
    @Html.LabelFor(model => model.ImageData, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <input type="file" name="ImageData" />
        @Html.ValidationMessageFor(model => model.ImageData, "", new { @class = "text-danger" })
    </div>
</div>

这里使用了Html.LabelFor和Html.ValidationMessageFor两个辅助方法。Html.LabelFor方法会自动根据Model中的属性生成相应的标签，而Html.ValidationMessageFor方法会自动显示Model中的属性验证错误信息。

  1. 在Controller中添加一个Action来处理文件上传。在Controllers文件夹中，打开要添加Action的Controller，然后添加以下：
[HttpPost]
public ActionResult Upload(MyModel model)
{
    if (ModelState.IsValid)
    {
        if (model.ImageData != null && model.ImageData.Length > 0)
        {
            // 将图片数据转换为Base64字符串
            string base64String = Convert.ToBase64String(model.ImageData);
            // 将Base64字符串转换为字节数组
            byte[] imageData = Convert.FromBase64String(base64String);
            // 保存图片数据到数据库或文件系统
            ...
            return RedirectToAction("Success");
        }
        else
        {
            ModelState.AddModelError("", "请选择要上传的图片");
        }
    }
    return View(model);
}

在上面的代码中，我们首先判断ModelState.IsValid属性来判断Model中的属性是否通过验证。如果验证通过，我们再判断图片数据为空，如果不为空，就将其转换为Base64字符串，并将其保存到数据库或文件系统中。如果图片数据为空，就显示错误信息“请选择要上传的图片”。

  1. 最后，在View中添加一个显示图片的标签。在Views文件夹，打开要添加显示图片的视图，然后添加以下代码：
@if (Model.ImageData null && Model.ImageData.Length > 0)
{
    <img src="data:image/png;base64,@Convert.ToBase64String(Model.ImageData)" />
}

这里使用了data URI scheme来显示图片。data URI scheme是一种将小型数据嵌入到文档中的方法可以将图片数据直接嵌入到HTML文档中，而不需要从服务器上加载图片文件。

以下是两个示例：

  1. 如果用户上传的文件不是图片文件，就会显示错误信息“请选择要上传的图片”。
[HttpPost]
public ActionResult Upload(MyModel model)
{
    if (ModelState.IsValid)
    {
        if (model.ImageData != null && model.ImageData.Length > 0)
        {
            // 判断文件类型是否为图片
            if (model.ImageData.ContentType != "image/jpeg" && model.ImageData.ContentType != "image/png")
            {
                ModelState.AddModelError("", "请选择图片文件");
                return View(model);
            }
            // 将图片数据转换为Base64字符串
            string base64String = Convert.ToBase64String(model.ImageData);
            // 将Base64字符串转换为字节数组
            byte[] imageData = Convert.FromBase64String(base64String);
            // 保存图片数据到数据库或文件系统
            ...
            return RedirectToAction("Success");
        }
        else
        {
            ModelState.AddModelError("", "请选择要上传的图片");
        }
    }
    return View(model);
}

在上面的代码中，我们添加了一个判断文件类型的逻辑。如果文件类型不是图片，就显示错误信息“请选择图片文件”。

  1. 如果用户上传的是一张图片，就会将其保存到或文件系统中，并在下一个页面中显示该图片。
@if (Model.ImageData null && Model.ImageData.Length > 0)
{
    <img src="@Url.Action("GetImage", "Home", new { id = Model.Id })" />
}

在上面的代码中，我们使用了Url.Action方法来生成一个URL，该URL指向一个Action，用于获取图片数据。在HomeController中，我们添加了一个名为GetImage的Action，用于获取图片数据并将其返回给客户端。

public ActionResult GetImage(int id)
{
    MyModel model = db.MyModels.Find(id);
    if (model != null && model.ImageData != null && model.ImageData.Length > 0)
    {
        return File(model.ImageData, "image/png");
    }
    else
    {
        return HttpNotFound();
    }
}

在上面的代码中，我们首先从数据库中获取指定ID的Model对象，然后判断其图片数据是否为空。如果图片数据不为空，就将其返回给客户端。如果图片数据为空，就返回一个HttpNotFound结果。

Tags: