如何使用Asp.net MVC 6一些模型数据上传文件或图像?例如,我有这样一种形式;
<form>
<input type="file">
<input type="text" placeholder="Image name...">
<input type="text" placeholder="Image description...">
<input type="submit" value="Submit">
</form>
我读了如何上传很多教程,但我没有看到任何与上述一样的形式的一些数据上传。
此外,有没有为调整大小和图像水印一样笨的图像处理类的图像处理任何图书馆吗? (https://codeigniter.com/user_guide/libraries/image_lib.html
您可以键入IFormFile
的一个新的属性添加到您的视图模型
public class CreatePost
{
public string ImageCaption { set;get; }
public string ImageDescription { set;get; }
public IFormFile MyImage { set; get; }
}
并在GET操作方法,我们将创建这个视图模型的对象,并发送至视图。
public IActionResult Create()
{
return View(new CreatePost());
}
现在,在您创建视图这是强类型的,以我们的视图模型,有它具有form
属性设置为enctype
一个"multipart/form-data"
标签
@model CreatePost
<form asp-action="Create" enctype="multipart/form-data">
<input asp-for="ImageCaption"/>
<input asp-for="ImageDescription"/>
<input asp-for="MyImage"/>
<input type="submit"/>
</form>
而你的HttpPost动作来处理表单提交
[HttpPost]
public IActionResult Create(CreatePost model)
{
var img = model.MyImage;
var imgCaption = model.ImageCaption;
//Getting file meta data
var fileName = Path.GetFileName(model.MyImage.FileName);
var contentType = model.MyImage.ContentType;
// do something with the above data
// to do : return something
}
如果你想将文件到某个目录上传您的应用程序,你应该使用IHostingEnvironment
获得Web根目录路径。这里是工作示例。
public class HomeController : Controller
{
private readonly IHostingEnvironment hostingEnvironment;
public HomeController(IHostingEnvironment environment)
{
hostingEnvironment = environment;
}
[HttpPost]
public IActionResult Create(CreatePost model)
{
// do other validations on your model as needed
if (model.MyImage != null)
{
var uniqueFileName = GetUniqueFileName(model.MyImage.FileName);
var uploads = Path.Combine(hostingEnvironment.WebRootPath, "uploads");
var filePath = Path.Combine(uploads,uniqueFileName);
model.MyImage.CopyTo(new FileStream(filePath, FileMode.Create));
//to do : Save uniqueFileName to your db table
}
// to do : Return something
return RedirectToAction("Index","Home");
}
private string GetUniqueFileName(string fileName)
{
fileName = Path.GetFileName(fileName);
return Path.GetFileNameWithoutExtension(fileName)
+ "_"
+ Guid.NewGuid().ToString().Substring(0, 4)
+ Path.GetExtension(fileName);
}
}
这将文件保存到uploads
您的应用程序的wwwwroot
目录使用的GUID生成一个随机文件名的文件夹内(以防止同名文件覆写)
在这里,我们使用的是非常简单的方法GetUniqueName
将从一个GUID添加4个字符的文件名末尾使之显得有些独特。您可以更新方法,使之更加复杂的需要。
如果你是完整的URL存储到上传的图片数据库?
号的完整URL不要存储在数据库中的图像。如果明天你的企业决定改变你的公司/产品名称从www.thefacebook.com
到www.facebook.com
?现在,你必须修复表中的所有的网址!
你应该怎么储存?
你应该保存您在上面产生(在uniqueFileName
varibale我们上面使用)来存储文件名唯一的文件名。当你要显示的图像回来,你可以使用这个值(文件名),并建立链接到图像。
例如,您可以在您的视图做到这一点。
@{
var imgFileName = "cats_46df.png";
}
<img src="~/uploads/@imgFileName" alt="my img"/>
我只是硬编码的图像名称imgFileName
变量和使用的。但是你可以从数据库中读取所存储的文件名,并设置到您的视图模型属性和使用。就像是
<img src="~/uploads/@Model.FileName" alt="my img"/>
存储图像表
如果你想将文件作为字节数组/ VARBINARY保存到数据库中,你可以将qazxsw POI对象转换为字节数组像这样
IFormFile
现在,在你的HTTP POST操作方法,你可以调用此方法来生成private byte[] GetByteArrayFromImage(IFormFile file)
{
using (var target = new MemoryStream())
{
file.CopyTo(target);
return target.ToArray();
}
}
字节数组,并用它来保存到您的表。下面的示例尝试使用实体框架保存后的实体对象。
IFormFile
[HttpPost]
public IActionResult Create(CreatePost model)
{
//Create an object of your entity class and map property values
var post=new Post() { ImageCaption = model.ImageCaption };
if (model.MyImage != null)
{
post.Image = GetByteArrayFromImage(model.MyImage);
}
_context.Posts.Add(post);
_context.SaveChanges();
return RedirectToAction("Index","Home");
}
我的动作是
<form class="col-xs-12" method="post" action="/News/AddNews" enctype="multipart/form-data">
<div class="form-group">
<input type="file" class="form-control" name="image" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary col-xs-12">Add</button>
</div>
</form>
你可以试试下面的代码
[HttpPost]
public IActionResult AddNews(IFormFile image)
{
Tbl_News tbl_News = new Tbl_News();
if (image!=null)
{
//Set Key Name
string ImageName= Guid.NewGuid().ToString() + Path.GetExtension(image.FileName);
//Get url To Save
string SavePath = Path.Combine(Directory.GetCurrentDirectory(),"wwwroot/img",ImageName);
using(var stream=new FileStream(SavePath, FileMode.Create))
{
image.CopyTo(stream);
}
}
return View();
}
public class UploadImage
{
public string ImageFile { get; set; }
public string ImageName { get; set; }
public string ImageDescription { get; set; }
}
<form class="form-horizontal" asp-controller="Image" asp-action="UploadImage" method="POST" enctype="multipart/form-data">
<input type="file" asp-for="ImageFile">
<input type="text" asp-for="ImageName">
<input type="text" asp-for="ImageDescription">
</form>