web-dev-qa-db-ja.com

MVC 4を使用してデータベースに画像を保存する方法

だから私はショッピングカートであるプロジェクトを持っています、サーバーに画像をアップロードする代わりにデータベースに画像を保存する必要があります、これが私のモデルです

namespace ShoppingCart.Models
{
    [Bind(Exclude = "ItemID")]
    public class Item
    {
        [ScaffoldColumn(false)]
        public int ItemID { get; set; }
        [DisplayName("Category")]
        public int CategoryID { get; set; }
        [DisplayName("Brand")]
        public int BrandID { get; set; }
        [Required(ErrorMessage = "A Name is required")]
        [StringLength(160)]
        public string Title { get; set; }
        public string Description { get; set; }
        [Required(ErrorMessage = "Price is required")]
        [Range(0.01, 100.00,
            ErrorMessage = "Price must be between 0.01 and 500.00")]
        public decimal Price { get; set; }
        [DisplayName("Album Art URL")]
        [StringLength(1024)]

        public string ItemArtUrl { get; set; }
        public byte[] Picture { get; set; }

        public virtual Category Category { get; set; }
        public virtual Brand Brand { get; set; }
        public virtual List<OrderDetail> OrderDetails { get; set; }
    }
}

コントローラーを使って画像を挿入したり、ビューを表示して表示する方法がわからないので、これに関する情報を検索していますが、実際には何も見つかりません。エンティティフレームワークコードを最初に使用しています。

entity-frameworkasp.net-mvc-4
17
Riquelmy Melara

画像を作成するには、2つの簡単な方法があります。1つは、単純にコントローラーに画像自体を返す方法です。

_    [HttpGet]
    [AllowAnonymous]
    public ActionResult ViewImage(int id)
    {
        var item = _shoppingCartRepository.GetItem(id);
        byte[] buffer = item.Picture;
        return File(buffer, "image/jpg", string.Format("{0}.jpg", id));
    }
_

そして、ビューはそれを参照するだけです：

_    <img src="Home/ViewImage/10" />
_

さらに、ViewModelに含めることができます。

_    viewModel.ImageToShow = Convert.ToBase64String(item.Picture);
_

ビューで：

_    @Html.Raw("<img src=\"data:image/jpeg;base64," + viewModel.ImageToShow + "\" />");
_

データストアの場合、バイト配列（varbinary(max)）またはblobまたは互換性のある型を使用するだけです。

画像のアップロード

ここでは、HeaderImageというオブジェクトがEntityFramework EntityObjectです。コントローラーは次のようになります。

_    [HttpPost]
    public ActionResult UploadImages(HttpPostedFileBase[] uploadImages)
    {
        if (uploadImages.Count() <= 1)
        {
            return RedirectToAction("BrowseImages");
        }

        foreach (var image in uploadImages)
        {
            if (image.ContentLength > 0)
            {
                byte[] imageData = null;
                using (var binaryReader = new BinaryReader(image.InputStream))
                {
                    imageData = binaryReader.ReadBytes(image.ContentLength);
                }
                var headerImage = new HeaderImage
                {
                    ImageData = imageData,
                    ImageName = image.FileName,
                    IsActive = true
                };
                imageRepository.AddHeaderImage(headerImage);
            }
        }
        return RedirectToAction("BrowseImages");
    }
_

ビューは次のようになります。

_            @using (Html.BeginForm("UploadImages", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                <div class="row">
                    <span class="span4">
                        <input type="file" name="uploadImages" multiple="multiple" class="input-files"/>
                    </span>
                    <span class="span2">
                        <input type="submit" name="button" value="Upload" class="btn btn-upload" />
                    </span>
                </div>
            }
_
38
Jaime Torres