در این مقاله نحوه آپلود فایل در پایگاه داده با استفاده از برنامه Angular در پروژه ASP.NET را خواهیم دید. اجازه دهید یک پروژه جدید در Visual Studio 2017 ایجاد کنیم. ما از ASP.NET Core 2.1 و Angular 5.2 برای این پروژه استفاده می کنیم.
مرحله 1
VS2017 را باز کنید و یک پروژه جدید >>Web >> .NET Core >> ASP.NET Core وب ایجاد کنید. اکنون قالب برنامه Angular را انتخاب کرده و OK کنید.
![هسته ASP.NET](http://pezhvak24.ir/dl/10kcor/cscd/article/how-to-file-upload-in-angular-5-with-asp-net-core-in-vs2017/Images/image001.png)
مرحله 2
اکنون، روی پوشه ClientApp خود کلیک راست کرده و "Open containing folder" را انتخاب کنید.
![هسته ASP.NET](http://pezhvak24.ir/dl/10kcor/cscd/article/how-to-file-upload-in-angular-5-with-asp-net-core-in-vs2017/Images/image002.png)
مرحله 3
cmd را در مسیر بنویسید و وارد کنید و > npmInstall را اجرا کنید
![هسته ASP.NET](http://pezhvak24.ir/dl/10kcor/cscd/article/how-to-file-upload-in-angular-5-with-asp-net-core-in-vs2017/Images/image003.png)
اکنون خط فرمان شما باز است. دستور نصب npm را برای نصب بسته های خود در برنامه Angular بنویسید.
![هسته ASP.NET](http://pezhvak24.ir/dl/10kcor/cscd/article/how-to-file-upload-in-angular-5-with-asp-net-core-in-vs2017/Images/image004.png)
مرحله 4
اکنون، برنامه خود را اجرا کنید و به طور خودکار بسته های npm شما را بازیابی می کند.
ساختار پروژه خود را در زیر مشاهده کنید.
![هسته ASP.NET](http://pezhvak24.ir/dl/10kcor/cscd/article/how-to-file-upload-in-angular-5-with-asp-net-core-in-vs2017/Images/image005.png)
مرحله 5
حالا فایل را اضافه کنید و API Controller را در پروژه خود آپلود کنید.
بر روی controller>>new item>>WebApiControllre>>نام را انتخاب کنید UploadController.cs کلیک راست کنید
![هسته ASP.NET](http://pezhvak24.ir/dl/10kcor/cscd/article/how-to-file-upload-in-angular-5-with-asp-net-core-in-vs2017/Images/image006.png)
مرحله 6
کد زیر را در کنترلر API کپی کنید.
- Open fileupload controller and paste this code.
- using System;
- using System.Collections.Generic;
- using System.IO;
- using System.Linq;
- using System.Net.Http.Headers;
- using System.Threading.Tasks;
- using Microsoft.AspNetCore.Hosting;
- using Microsoft.AspNetCore.Mvc;
- // For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
- namespace FileUploadAngular5WithAsp.NetCore.Controllers
- {
- [Produces("application/json")]
- [Route("api/[controller]")]
- public class UploadController : Controller
- {
- private IHostingEnvironment _hostingEnvironment;
- public UploadController(IHostingEnvironment hostingEnvironment)
- {
- _hostingEnvironment = hostingEnvironment;
- }
- [HttpPost, DisableRequestSizeLimit]
- public ActionResult UploadFile()
- {
- try
- {
- var file = Request.Form.Files[0];
- string folderName = "Upload";
- string webRootPath = _hostingEnvironment.WebRootPath;
- string newPath = Path.Combine(webRootPath, folderName);
- if (!Directory.Exists(newPath))
- {
- Directory.CreateDirectory(newPath);
- }
- if (file.Length > 0)
- {
- string fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
- string fullPath = Path.Combine(newPath, fileName);
- using (var stream = new FileStream(fullPath, FileMode.Create))
- {
- file.CopyTo(stream);
- }
- }
- return Json("Upload Successful.");
- }
- catch (System.Exception ex)
- {
- return Json("Upload Failed: " + ex.Message);
- }
- }
- }
- }
اکنون، جزء آپلود فایل را در پروژه Angular خود ایجاد کنید.
-
روی ClientApp کلیک راست کرده و cmd را بنویسید. سپس این دستور را بنویسید: ng gc fileupload
-
g=تولید
-
c=cm
![هسته ASP.NET](http://pezhvak24.ir/dl/10kcor/cscd/article/how-to-file-upload-in-angular-5-with-asp-net-core-in-vs2017/Images/image007.png)