總結一下.net core的上傳文件操作,這里主要分上傳到本地的也就是MVC的,另一種是上傳到WebAPi的.
一、Web端
1.新建一個.net core mvc項目
2.這里的版本是.net core 2.2.4
3.新建一個控制器 TestController
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; namespace Web.Controllers { public class TestController : Controller { private readonly IHostingEnvironment _hostingEnvironment; public TestController(IHostingEnvironment hostingEnvironment) { _hostingEnvironment = hostingEnvironment; } public IActionResult Index() { return View(); } /// <summary> /// 上傳圖片 /// </summary> /// <returns></returns> [HttpPost] public string UploadFiles(string z) { long size = 0; var path = ""; var files = Request.Form.Files; foreach (var file in files) { var filename = ContentDispositionHeaderValue .Parse(file.ContentDisposition) .FileName .Trim('"'); string fileExt = Path.GetExtension(file.FileName); //文件擴展名 long fileSize = file.Length; //獲得文件大小，以字節為單位 string newFileName = System.Guid.NewGuid().ToString() + fileExt; //隨機生成新的文件名 path = "/upload/" + newFileName; path = _hostingEnvironment.WebRootPath + $@"\{path}"; size += file.Length; using (FileStream fs = System.IO.File.Create(path)) { file.CopyTo(fs); fs.Flush(); } path = "/upload/" + newFileName; } return path; } } }
4.新建頁面Index
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <form id="form0"> <input type="file" name="file" /> <input type="button" value="上傳本地" onclick="upload()" /> </form> </body> </html> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/js/jquery.form.js"></script> <script> function upload() { var formData = new FormData($("#form0")[0]); $.ajax({ url: "/test/UploadFiles", data: formData, contentType: false, processData: false, cache: false, type: 'post', success: function (d) { console.log(d); } }) } </script>
5.注意:默認所有的靜態文件都放在wwwroot 所以這里我在wwwroot下創建了文件夾upload從來存儲文件
這樣Web端的上傳文件就搞定了
二、WebApi端
1.新建一個webapi項目
2.新建一個api控制器 TestApiController
using System; using System.Collections; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Cors; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; namespace WebApi.Controllers { [EnableCors("AllowSameDomain")]//跨域 [Route("api/[controller]/[action]")] [ApiController] public class TestApiController : ControllerBase { private readonly IHostingEnvironment _hostingEnvironment; public TestApiController(IHostingEnvironment hostingEnvironment) { _hostingEnvironment = hostingEnvironment; } [HttpPost] public ResultObject UploadIForm(List<IFormFile> files) { List<String> filenames = new List<string>(); foreach (var file in files) { var fileName = file.FileName; Console.WriteLine(fileName); fileName = $"/UploadFile/{fileName}"; filenames.Add(fileName); fileName = _hostingEnvironment.WebRootPath + fileName; using (FileStream fs = System.IO.File.Create(fileName)) { file.CopyTo(fs); fs.Flush(); } } return new ResultObject { state = "Success", resultObject = filenames }; } [HttpPost] public string Upload(IFormCollection Files) { try { //var form = Request.Form;//直接從表單里面獲取文件名不需要參數 string dd = Files["File"]; var form = Files;//定義接收類型的參數 Hashtable hash = new Hashtable(); IFormFileCollection cols = Request.Form.Files; if (cols == null || cols.Count == 0) { return JsonConvert.SerializeObject(new { status = -1, message = "沒有上傳文件", data = hash }); } foreach (IFormFile file in cols) { //定義圖片數組后綴格式 string[] LimitPictureType = { ".JPG", ".JPEG", ".GIF", ".PNG", ".BMP" }; //獲取圖片后綴是否存在數組中 string currentPictureExtension = Path.GetExtension(file.FileName).ToUpper(); if (LimitPictureType.Contains(currentPictureExtension)) { //為了查看圖片就不在重新生成文件名稱了 // var new_path = DateTime.Now.ToString("yyyyMMdd")+ file.FileName; var new_path = Path.Combine("uploads/images/", file.FileName); var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", new_path); using (var stream = new FileStream(path, FileMode.Create)) { //圖片路徑保存到數據庫里面去 bool flage = true; if (flage == true) { //再把文件保存的文件夾中 file.CopyTo(stream); hash.Add("file", "/" + new_path); } } } else { return JsonConvert.SerializeObject(new { status = -2, message = "請上傳指定格式的圖片", data = hash }); } } return JsonConvert.SerializeObject(new { status = 0, message = "上傳成功", data = hash }); } catch (Exception ex) { return JsonConvert.SerializeObject(new { status = -3, message = "上傳失敗", data = ex.Message }); } } } public class ResultObject { public String state { get; set; } public Object resultObject { get; set; } } }
3.這里前台頁面還是通過ajax來請求api的,所以就需要進行跨域
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Logging; using Microsoft.Extensions.Options; namespace WebApi { public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { //允許一個或多個具體來源: services.AddCors(options => { // Policy 名稱 CorsPolicy 是自訂的，可以自己改 //跨域規則的名稱 options.AddPolicy("AllowSameDomain", policy => { // 設定允許跨域的來源，有多個的話可以用 `,` 隔開 policy .WithOrigins("http://127.0.0.1:53189", "http://localhost:53189") //.AllowAnyOrigin()//允許所有來源的主機訪問 .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials();//指定處理cookie }); }); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseCors("AllowSameDomain");//必須位於UserMvc之前 app.UseMvc(); } } }
4.前台頁面 還是用這個方法,url改下
function upload1() { var formData = new FormData($("#form0")[0]); $.ajax({ url: "http://127.0.0.1:8067/api/testapi/Upload", data: formData, contentType: false, processData: false, cache: false, type: 'post', success: function (d) { console.log(d); } }) }
5.將webapi發布到iis
6.同樣的,靜態文件還是在wwwroot下,api發布后是沒有wwwroot文件夾的,所以直接建 /wwwroot/upload文件夾
這樣上傳就搞定了