この記事では主に .Net Core の実装イメージ ファイルのアップロード ダウンロード機能を詳しく紹介します。興味のある方は参考にしてください
現在、.Net Core プロジェクトが雨後の筍のように湧き出ています。 .Net 軍のメンバーとして、私は .Net Core を積極的に採用し、ビジネス開発に積極的に使用しています。まず、.Net Core プロジェクトで実装されたファイルのアップロードとダウンロードのインターフェイスを紹介します。
1. 開発環境
間違いなく、宇宙初の IDE VisualStudio 2017
2. プロジェクト構造
ファイルのアップロードとダウンロードコントローラー
PictureController 画像のアップロードとダウンロード制御デバイス
Return_Helper_DG 戻り値ヘルパー クラス
3. キー コード
1. まず、これはプログラムの起動設定クラスです。
クロスドメイン構成:
もちろん、DLL へのクロスドメイン参照は不可欠です
サーバー リソース パスの置換を防ぐことができます。サーバー ファイル パスの推測、アクセス用の仮想シャドウの作成を防止し、セキュリティを向上させます。
Startup.cs の完全なコードは次のとおりです:
using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.FileProviders; using Microsoft.Extensions.Logging; using System.IO; namespace QX_Core.FilesCenter { public class Startup { public Startup(IHostingEnvironment env) { var builder = new ConfigurationBuilder() .SetBasePath(env.ContentRootPath) .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true) .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true) .AddEnvironmentVariables(); Configuration = builder.Build(); } public IConfigurationRoot Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { // Add framework services. services.AddMvc(); #region CORS services.AddCors(options => { options.AddPolicy("AllowSpecificOrigin", builder => builder.WithOrigins("http://localhost:3997").AllowAnyHeader().AllowAnyOrigin().AllowAnyMethod()); }); #endregion } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { //loggerFactory.AddConsole(Configuration.GetSection("Logging")); //loggerFactory.AddDebug(); app.UseMvc(); // Shows UseCors with named policy. app.UseCors("AllowSpecificOrigin"); app.UseStaticFiles(new StaticFileOptions() { FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot/Files")), RequestPath = new PathString("/src") }); } } }
2. Return_Helper_DG クラスのユーザーはクライアントにフィードバックする統一された戻り値を設定します
Return_Helper_DG クラスのコードは次のとおりです:
using System.Net; /** * author:qixiao * create:2017-5-19 15:15:05 * */ namespace QX_Core.FilesCenter.QX_Core.Helper { public abstract class Return_Helper_DG { public static object IsSuccess_Msg_Data_HttpCode(bool isSuccess, string msg, dynamic data, HttpStatusCode httpCode = HttpStatusCode.OK) { return new { isSuccess = isSuccess, msg = msg, httpCode = httpCode, data = data }; } public static object Success_Msg_Data_DCount_HttpCode(string msg, dynamic data = null, int dataCount = 0, HttpStatusCode httpCode = HttpStatusCode.OK) { return new { isSuccess = true, msg = msg, httpCode = httpCode, data = data, dataCount = dataCount }; } public static object Error_Msg_Ecode_Elevel_HttpCode(string msg, int errorCode = 0, int errorLevel = 0, HttpStatusCode httpCode = HttpStatusCode.InternalServerError) { return new { isSuccess = false, msg = msg, httpCode = httpCode, errorCode = errorCode, errorLevel = errorLevel }; } } }
3. FilesCon troller は、アップロードされたファイルの受信操作を定義するファイル アップロード コントローラー インターフェイスであり、コントローラー上でクロスドメイン構成を有効にします
using Microsoft.AspNetCore.Cors; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Mvc; using Microsoft.Net.Http.Headers; using QX_Core.FilesCenter.QX_Core.Helper; using System; using System.Collections.Generic; using System.IO; using System.Linq; namespace QX_Core.FilesCenter.Controllers { //[Produces("application/json")] [Route("api/[controller]")] [EnableCors("AllowSpecificOrigin")] public class FilesController : Controller { private IHostingEnvironment hostingEnv; public FilesController(IHostingEnvironment env) { this.hostingEnv = env; } [HttpPost] public IActionResult Post() { var files = Request.Form.Files; long size = files.Sum(f => f.Length); //size > 100MB refuse upload ! if (size > 104857600) { return Json(Return_Helper_DG.Error_Msg_Ecode_Elevel_HttpCode("files total size > 100MB , server refused !")); } List<string> filePathResultList = new List<string>(); foreach (var file in files) { var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"'); string filePath = hostingEnv.WebRootPath + $@"\Files\Files\"; if (!Directory.Exists(filePath)) { Directory.CreateDirectory(filePath); } fileName = Guid.NewGuid() + "." + fileName.Split('.')[1]; string fileFullName = filePath + fileName; using (FileStream fs = System.IO.File.Create(fileFullName)) { file.CopyTo(fs); fs.Flush(); } filePathResultList.Add($"/src/Files/{fileName}"); } string message = $"{files.Count} file(s) /{size} bytes uploaded successfully!"; return Json(Return_Helper_DG.Success_Msg_Data_DCount_HttpCode(message, filePathResultList, filePathResultList.Count)); } } }
上記のコードでは、アップロードされたファイルの制限を確認し、ファイル サイズに関するフィードバックを提供します。
4. PictureController 画像アップロード コントローラー インターフェイス。ファイルに似ていますが、アップロードされる画像の種類に検証と制限があります
using Microsoft.AspNetCore.Cors; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Mvc; using Microsoft.Net.Http.Headers; using QX_Core.FilesCenter.QX_Core.Helper; using System; using System.Collections.Generic; using System.IO; using System.Linq; namespace QX_Core.FilesCenter.Controllers { //[Produces("application/json")] [Route("api/[controller]")] [EnableCors("AllowSpecificOrigin")] public class PicturesController : Controller { private IHostingEnvironment hostingEnv; string[] pictureFormatArray = { "png", "jpg", "jpeg", "bmp", "gif","ico", "PNG", "JPG", "JPEG", "BMP", "GIF","ICO" }; public PicturesController(IHostingEnvironment env) { this.hostingEnv = env; } [HttpPost] public IActionResult Post() { var files = Request.Form.Files; long size = files.Sum(f => f.Length); //size > 100MB refuse upload ! if (size > 104857600) { return Json(Return_Helper_DG.Error_Msg_Ecode_Elevel_HttpCode("pictures total size > 100MB , server refused !")); } List<string> filePathResultList = new List<string>(); foreach (var file in files) { var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"'); string filePath = hostingEnv.WebRootPath + $@"\Files\Pictures\"; if (!Directory.Exists(filePath)) { Directory.CreateDirectory(filePath); } string suffix = fileName.Split('.')[1]; if (!pictureFormatArray.Contains(suffix)) { return Json(Return_Helper_DG.Error_Msg_Ecode_Elevel_HttpCode("the picture format not support ! you must upload files that suffix like 'png','jpg','jpeg','bmp','gif','ico'.")); } fileName = Guid.NewGuid() + "." + suffix; string fileFullName = filePath + fileName; using (FileStream fs = System.IO.File.Create(fileFullName)) { file.CopyTo(fs); fs.Flush(); } filePathResultList.Add($"/src/Pictures/{fileName}"); } string message = $"{files.Count} file(s) /{size} bytes uploaded successfully!"; return Json(Return_Helper_DG.Success_Msg_Data_DCount_HttpCode(message, filePathResultList, filePathResultList.Count)); } } }
この時点で、ファイルと画像のアップロード コードが完了しました。ファイルをアップロードしましょう。アップロードされたクライアントが実装されます
4. クライアントの実装
クライアント 画像ファイルを送信するために jQuery Ajax を使用するだけです:
<!doctype> <head> <script src="jquery-3.2.0.min.js"></script> <script> $(document).ready(function () { var appDomain = "http://localhost:53972/"; $("#btn_fileUpload").click(function () { var fileUpload = $("#files").get(0); var files = fileUpload.files; var data = new FormData(); for (var i = 0; i < files.length; i++) { data.append(files[i].name, files[i]); } $.ajax({ type: "POST", url: appDomain+'api/Pictures', contentType: false, processData: false, data: data, success: function (data) { console.log(JSON.stringify(data)); }, error: function () { console.log(JSON.stringify(data)); } }); }); //end click }) </script> </head> <title></title> <body> <article> <header> <h2>article-form</h2> </header> <p> <form id="uploadForm" enctype="multipart/form-data"> <input type="file" id="files" name="files" placeholder="file" multiple>file-multiple属性可以选择多项<br><br> <input type="button" id="btn_fileUpload" value="fileUpload"> </form> </p> </article> </body>
5. コードのテスト
1.
コンソールと Web が自動的に起動し、Web にはデフォルトの Values コントローラーのリクエスト戻り値が表示されていることがわかります。
2. 画像のアップロード
ajax を使用して画像をアップロードし、テスト Web ページを開き、画像を選択して、アップロードをクリックすると、コンソールから返された結果が表示されます:
画像が表示されます。アップロードが成功しました。
返されたアドレスを入力すると、画像が正常にアクセスされたことがわかります。ここでサーバーパスの変更に特に注意してください:
複数の画像のアップロード:
画像は複数アップロードしても問題ありません!
同様にファイルのアップロードテストを実行します:
同様に、ファイルのアップロードには問題はありません。
6. まとめ
これまでに、期待される .Net Core イメージ ファイルのアップロード機能をすべて実装しました。
以上が.Net Core を使用した画像のアップロードとダウンロードに関するサンプル チュートリアルを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。