آپلود و ذخیره فایل در Asp.net Core

آپلود و ذخیره فایل در Asp.net Core

خواندن این مطلب

4 دقیقه

زمان میبرد!

اگه قصد داشته باشید یک سایت را برنامه نویسی بکنید غیر ممکن است که به این نیاز پیدا نکنید که یک فایل را آپلود و ذخیره بکنید برای مثال در سایت نونویسان ما تصاویر را برای نمایش در بانک اطلاعاتی ذخیره میکنیم.
میخوام توی آموزش آپلود و ذخیره فایل در Asp.net Core به شما بگم چطوری یک فایل را دریافت و آن را در پروژه خود ذخیره کنید تا بتوانید هر جا که به آن نیاز دارید فراخوانی بکنید و نمایش دهید.

آپلود و ذخیره فایل در Asp.net Core

با استفاده از این آموزش میتوانید هر فایلی را در پروژه خود دریافت و ذخیره کنید مهم نیست ویدئو باشد یا تصویر و یا حتی یک موسیقی.

در مرحله اول در سرویس های خود باید یک سرویس برای دریافت و ذخیره سازی بنویسیم پس باید یک متد برای افزودن یا همان Create بنویسیم.

				
					public int AddTeacher(Teacher teacher, IFormFile ImgUp)
    {
        if (ImgUp != null)
        {
            teacher.TeacherAvatar = Guid.NewGuid() + Path.GetExtension(ImgUp.FileName);
            string imagePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/TeacherImages", teacher.TeacherAvatar);
            using (var stram = new FileStream(imagePath, FileMode.Create))
            {
                ImgUp.CopyTo(stram);
            }
        }
        _context.Teachers.Add(teacher);
        _context.SaveChanges();
        return teacher.TeacherId;
    }
				
			

این یک متد برای Create است ورودی اول که Teacher نام دارد مدرس است در اصل ما داریم یک مدرس اضافه میکنیم که قابلیت بارگذاری تصویر نیز دارد و ورودی دوم که از نوع IFormFile است برای کار با فایل است و برای آن اسم ImgUp رو انتخاب میکنیم و در شرط بررسی میکنیم که اگه تصویر مخالف Null بود یعنی تصویری بارگذاری شده بود اول بیا یک اسم برای Image انتخاب کن و نوع فرمت تصویر هم در انتها قرار بده.

در خط دوم پوشه wwwroot را با مسیر ذخیره سازی کنار هم قرار میدیم تا وقتی پروژه پابلیش شده دستی مسیر ذخیره را انتخاب نکنیم و خودش مسیر رو پیدا کنه و در مرحله بعدی هم فایل رو ذخیره میکنیم و در نهایت Model را ذخیره و بروزرسانی میکنیم.

چون متد از نوع int است باید Id را Return کنیم تا به ایدی کاربر دسترسی داشته باشیم اگه شما بجای int از Void استفاده بکنید و خط آخر را پاک کنید مشکلی به وجود نمی‌آید که اگه بخوام براتون کد اون هم قرار بدم به شکل زیر میشود.

				
					public void AddTeacher(Teacher teacher, IFormFile ImgUp)
    {
        if (ImgUp != null)
        {
            teacher.TeacherAvatar = Guid.NewGuid() + Path.GetExtension(ImgUp.FileName);
            string imagePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/TeacherImages", teacher.TeacherAvatar);
            using (var stram = new FileStream(imagePath, FileMode.Create))
            {
                ImgUp.CopyTo(stram);
            }
        }
        _context.Teachers.Add(teacher);
        _context.SaveChanges();
    }
				
			

در مرحله بعد باید وارد Controller یا Razor Page شوید که در هر صورت فرقی نمیکند و از سرویس نوشته شده استفاده بکنید که من در اینجا از Razor Page استفاده کردم که براتون کد را قرار میدم و بعد توضیح میدهم.

البته دقت کنید که بعد wwwroot یک مسیر به نام TeacherImages وجود دارد که یک پوشه است در wwwroot تا تصاویر در آن پوشه ذخیره شوند که این Folder را باید خودتون دستی ایجاد بکنید.

				
					public class CreateTeacherModel : PageModel
    {
        private ITeacherServices _teacherServices;
        public CreateTeacherModel(ITeacherServices teacherServices)
        {
            _teacherServices = teacherServices;
        }

        [BindProperty]
        public Teacher Teacher { get; set; }

        public void OnGet()
        {

        }

        public IActionResult OnPost(IFormFile ImgUp)
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }
            _teacherServices.AddTeacher(Teacher, ImgUp);
            return RedirectToPage("Index");
        }
    }
				
			

در مرحله اول که سرویس خود را در Constructor قرار داده ایم که بتوانیم از آن استفاده بکنیم و در خط بعد در قالب یک Property مدل خود را نوشتیم و صفت BindProperty را برای آن اضافه کردیم این صفت در Controller کاربرد ندارد و در Razor Page به این شکل نوشته میشود به این معنی هست که اگه خواستیم یک مدرس اضافه بکنیم و در مدل تغییری دهیم به ما اجازه اضافه بدهد در get که لازم نیست چیزی بنویسیم ولی در پست باید مثل سرویس ImgUp را بنویسیم و در شرط بررسی کردیم که اگه اطلاعات Valid نبود یعنی کاربر چیزی را وارد نکرده بود نزار که کاربر اطلاعات را ذخیره بکنه و ارور های لازم را نمایش بده و در بخش بعدی AddTeacher که نوشته بودیم را فراخوانی میکنیم که دو پارامتر لازم دارد اول که مدل است که بالاتر در Property نوشته بودیم و دومی تصویر که در ورودی OnPost دریافت کردیم حالا باید سرویس خود را در Program.cs قرار دهیم تا بتوانیم از آن استفاده کنیم دقت کنید در بخش Middleware ها اضافه نکنید و در بخش اول کد زیر را بنویسید.

				
					builder.Services.AddScoped<ITeacherServices, TeacherServices>();
				
			

این به این معنی است که هرکسی ITeacherServices خواست بهش یدونه TeacherServices بده تا کاربر بتونه از اون استفاده بکنه.

در مرحله آخر وارد View میشویم تا کار های لازم را برای ذخیره سازی انجام دهیم.

باید به Form خود که اطلاعات را به صورت Post ارسال میکند کد زیر را اضافه کنید تا اجازه کار با فایل را داشته باشید و برای شما ذخیره سازی انجام بشه که به شکل زیر به Form اضافه میشود

				
					<form method="post" enctype="multipart/form-data">
    
</form>
				
			

حالا نوبت بخشی است که با کلیک برا روی آن صفحه زیر باز شود و شما فایل خود را انتخاب کنید.

انتخاب فایل برای بارگذاری
				
					<div class="form-group row">
        <div class="col-2 text-right">
            تصویر مدرس:
        </div>
        <div class="col-5">
            <input type="file" name="ImgUp" />
        </div>
    </div>
				
			

طراحی این بخش به عهده خودتون است و من فقط کد های ذخیره سازی رو براتون توضیح میدم دقیقا چوت در کد ImgUp را انتخاب کردیم در Input که از نوع File است بخش Name آن را نیز ImgUp قرار میدهیم حالا شما میتوانید هر نوع فایلی را بارگذاری و ذخیره کنید.

برای شما تا اینجا فقط ذخیره رو گفتم حالا براتون بروزرسانی هم میگم چون شاید مدرس قصد تغییر تصویر خود را داشته باشد پس باید تصویر قبلی حذف و تصویر جدید Save شود که تنها تفاوت Create و Update در سرویس های آن می‌باشد و یک کد کوچیک.

				
					public void UpdateTeacher(Teacher teacher, IFormFile ImgUp)
    {
        if (teacher.TeacherAvatar != null)
        {
            string DeleteImage = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/TeacherImages", teacher.TeacherAvatar);
            if (File.Exists(DeleteImage))
            {
                File.Delete(DeleteImage);
            }
            teacher.TeacherAvatar = Guid.NewGuid() + Path.GetExtension(ImgUp.FileName);
            string imagePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/TeacherImages", teacher.TeacherAvatar);
            using (var stram = new FileStream(imagePath, FileMode.Create))
            {
                ImgUp.CopyTo(stram);
            }
            _context.Teachers.Update(teacher);
            _context.SaveChanges();
        }
    }
				
			

فقط DeleteImage اضافی شده و بقیه بخش ها تکراری هستند و آن هم برای این است که وارد مسیر تصویر شده و اگه تصویری وجود داشت حذف کند و جدید را جایگزین بکند در ادامه باید در View داخل Form مقادیر زیر را بنویسید تا بروزرسانی دچار مشکل نشود اول ID است تا متوجه بشه سیستم که کدوم ایدی ویرایش میشه و دوم تصویر که متوجه تغییر در تصویر بشه که به شکل زیر نوشته میشود و بقیه گزینه های Form در ادامه نوشته میشوند.

				
					<form method="post" enctype="multipart/form-data">
    <input type="hidden" asp-for="Teacher.TeacherId" />
    <input type="hidden" asp-for="Teacher.TeacherAvatar" />
</form>
				
			

برای حذف فایل مورد نظر تمامی بخش ها با Update یکسان است بجز سرویس مورد نظر آن که باید به شکل زیر نوشته شود.

				
					public void DeleteTeacher(Teacher teacher, IFormFile ImgUp)
    {
        string DeleteImage = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/TeacherImages", teacher.TeacherAvatar);
        if (File.Exists(DeleteImage))
        {
            File.Delete(DeleteImage);
        }
        _context.Teachers.Remove(teacher);
        _context.SaveChanges();
    }
				
			

در آموزش آپلود و ذخیره فایل در Asp.net Core به شما یاد دادم که برای یک فایل چگونه یک CRUD ایجاد بکنید در صورت بروز سوال در بخش کامنت ها مطرح بکنید.

به مقاله امتیاز دهید

درباره نویسنده



نظرات کاربران



دیدگاهتان را بنویسید

مطالب مرتبط