學習ASP.NET Core Blazor編程系列十七——文件上傳(上)

来源:https://www.cnblogs.com/chillsrc/archive/2022/12/18/16990664.html
-Advertisement-
Play Games

前言 在前三章中我們的案例大量使用到了Thread這個類,通過其原始API,對其進行創建、啟動、中斷、中斷、終止、取消以及異常處理,這樣的寫法不僅不夠優雅(對接下來這篇,我稱其為.NET現代化並行編程體系中出現的API而言),並且大部分的介面都是極度複雜和危險的。很幸運,如今.NET已經提供,並且普 ...


學習ASP.NET Core Blazor編程系列文章之目錄 學習ASP.NET Core Blazor編程系列一——綜述 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式(上)
學習ASP.NET Core Blazor編程系列三——實體 學習ASP.NET Core Blazor編程系列五——列表頁面 學習ASP.NET Core Blazor編程系列七——新增圖書 學習ASP.NET Core Blazor編程系列八——數據校驗 學習ASP.NET Core Blazor編程系列十——路由(上) 學習ASP.NET Core Blazor編程系列十三——路由(完) 學習ASP.NET Core Blazor編程系列十五——查詢 學習ASP.NET Core Blazor編程系列十六——排序  

      從本篇文章開始我們來講在圖書租賃系統中如何使用內置的文件上傳組件進行文件上傳功能的開發。本文的示例適合上傳小型文件。本篇文章演示如何通過Blazor的內置組件InputFile將文件上傳至伺服器。

     安全註意事項

  在向用戶提供向上傳文件的功能時,必須格外註意安全性。攻擊者可能對系統執行拒絕服務和其他攻擊。所以在提供上傳功能時需要註意以下安全措施:

    1. 將文件上傳到系統上的專用文件上傳目錄,這樣可以更輕鬆地對上傳內容實施安全措施。如果允許文件上傳,請確保在上傳目錄禁用執行許可權。

    2. 上傳文件的文件名在伺服器端保存時要由應用程式自動重新命名文件名稱,而不是採用用戶輸入或已上傳文件的文件名。

    3.請不要將上傳的文件保存在與應用程式相同的目錄下。

    4. 僅允許使用一組特定的文件擴展名。

    5. 在服務端重新執行客戶端檢查。 不要相信客戶端檢查,因為客戶端檢查很容易規避。

    6. 檢查上傳文件大小,防止上傳文件的大小比預期的文件大小大。

    7. 對上傳文件的內容進行病毒/惡意軟體掃描程式。

    8.應用程式中的文件不能被具有相同名稱的上傳文件覆蓋。

警告

   將惡意代碼上傳到系統通常是執行代碼的第一步,這些代碼可以實現以下功能:

   1. 完全接管系統。

   2. 重載系統,導致系統完全崩潰。

   3. 泄露用戶或系統數據。

 

一、添加一個用於上傳文件的文件輔助類FileHelpers

為避免處理上傳文件文件時出現重覆代碼,我們首先創建一個靜態類用於處理上傳功能。

   1.在Visual Studio 2022 的解決方案資源管理器中創建一個“Utils”文件夾。

   2.在Visual Studio 2022的解決方案資源管理器中,滑鼠左鍵選中“Utils”文件夾,右鍵單擊,在彈出菜單中選擇“添加—>類”(如下圖)。 將類命名為“FileHelpers”。

 

   3.在Visual Studio 2022的文本編輯器中打開我們剛纔創建的“FileHelpers.cs”類文件,並添加以下內容。其中方法 ProcessFormFile 接受 IBrowserFile 和 ModelStateDictionary等參數,保存成功則空字元串,否則返回錯誤信息。 檢查內容類型和長度。 如果上傳文件未通過校驗,將向 ModelState 添加一個錯誤。

using BlazorAppDemo.Models;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using System.ComponentModel.DataAnnotations;
using System.Net;
using System.Reflection;
using System.Text;
 
namespace BlazorAppDemo.Utils
{

    public class FileHelpers
    {

        public static async Task<string> ProcessFormFile(IBrowserFile formFile, ModelStateDictionary modelState,IWebHostEnvironment envir,int maxFileSize)
        {
            var fieldDisplayName = string.Empty;        
 
            if (!string.IsNullOrEmpty(formFile.Name))
            {
                // 如果名稱沒有找到,將會有一個簡單的錯誤消息,但不會顯示文件名稱
                string displayFileName = formFile.Name.Substring(formFile.Name.IndexOf(".") + 1);

                fieldDisplayName = $"{displayFileName} ";
               
            }
 
            //使用path.GetFileName獲取一個帶路徑的全文件名。
            //通過HtmlEncode進行編碼的結果必須在錯誤消息中返回。
            var fileName = WebUtility.HtmlEncode(Path.GetFileName(formFile.Name));
 
            if (formFile.ContentType.ToLower() != "text/plain")
            {
                modelState.AddModelError(formFile.Name,
                                         $"The {fieldDisplayName}file ({fileName}) must be a text file.");
            }
 
 
            //校驗文件長度,如果文件不包含內容,則不必讀取文件長度。
            //此校驗不會檢查僅具有BOM(位元組順序標記)作為內容的文件,
            //因此在讀取文件內容後再次檢驗文件內容長度,以校驗僅包含BOM的文件。
            if (formFile.Size == 0)
            {
                modelState.AddModelError(formFile.Name, $"The {fieldDisplayName}file ({fileName}) is empty.");

            }
            else if (formFile.Size > maxFileSize)
            {

                modelState.AddModelError(formFile.Name, $"The {fieldDisplayName}file ({fileName}) exceeds 1 MB.");
            }
            else
            {
                try
                {
                  

                    //獲取一個隨機文件名
                    var trustedFileNameForFileStorage=Path.GetRandomFileName();
                    var path = Path.Combine(envir.ContentRootPath, envir.EnvironmentName, "unsafeUploads", trustedFileNameForFileStorage);
 
                    using (
                        var reader =
                            new FileStream(
                                path,
                                FileMode.Create))
                    {
                        await formFile.OpenReadStream(maxFileSize).CopyToAsync(reader);
                    }

                }
                catch (Exception ex)
                {
                    modelState.AddModelError(formFile.Name,

                                             $"The {fieldDisplayName}file ({fileName}) upload failed. " +

                                             $"Please contact the Help Desk for support. Error: {ex.Message}");
             //return ex.Message;
               throw ex;
                }
            }
            return string.Empty;
        }

    }

}

 

 

二、添加前端代碼

1.  在Visual Studio 2022的解決方案資源管理器中,滑鼠右鍵單擊“Pages”文件夾。在彈出菜單中選擇,添加-->Razor組件。如下圖。

 

2.在彈出對話框,名稱中輸入FileUpload1.razor。如下圖。

3. 在Visual Studio 2022的解決方案資源管理器中,滑鼠左鍵雙擊“Pages\FileUpload1.razor”文件,在文本編輯器中打開,在文件的頂部添加@page指令。並添加如下代碼。

@page "/FileUpload1"
@using BlazorAppDemo.Utils
@using Microsoft.AspNetCore.Mvc.ModelBinding
@inject IWebHostEnvironment Environ
<h3>多文件上傳示例</h3>
<p>
    <label>
        提示信息:@Message
 
    </label>
</p>
<p>
    <label>
        上傳文件最大可以為:<input type="number" @bind="maxFileSize"/>位元組
 
    </label>
</p>
<p>
    <label>
        一次可上傳:<input type="number" @bind="maxAllowedFiles" />個文件
 
    </label>
</p>
<p>
    <label>
        選擇上傳文件:<InputFile OnChange="@LoadFiles" multiple />
 
    </label>
</p>
@if (isLoading)
{
    <p>文件上傳中......</p>
}
else
{
    <ul>
        @foreach (var file in loadedFiles)
        {
            <li>
                <ul>
                    <li>文件名:@file.Name</li>
                    <li>最後修改時間:@file.LastModified.ToString()</li>
                    <li>文件大小(byte):@file.Size</li>
                    <li>文件類型:@file.ContentType</li>
                </ul>
            </li>
           
        }
 
    </ul>
}
 
@code {
    private List<IBrowserFile> loadedFiles = new();
    private long maxFileSize = 1024 * 18;
    private int maxAllowedFiles = 2;
    private bool isLoading;
    private string Message = string.Empty;
 
    private async Task LoadFiles(InputFileChangeEventArgs e)
    {
        isLoading = true;
        loadedFiles.Clear();
        foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
        {
            try
            {
                ModelStateDictionary modelState = new ModelStateDictionary();
                loadedFiles.Add(file);
                string result=  await FileHelpers.ProcessFormFile(file, modelState, Environ, maxFileSize);

                if (string.IsNullOrEmpty(result))
                {
                    Message = "上傳成功!";
                }else
                Message = "上傳失敗!";
            }
            catch (Exception ex)
            {
                Message = ex.Message;
               
            }
        }
        isLoading = false;
    }
}

 

 


4. 在Visual Studio 2022的解決方案資源管理器中,滑鼠左鍵雙擊“Shared\NavMenu.razor”文件,在文本編輯器中打開,我們在此文中添加指向上傳文件的菜單。具體代碼如下:

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorAppDemo</a>

        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>
 
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="BookIndex">
                <span class="oi oi-list-rich" aria-hidden="true"></span> 圖書列表
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="AddBook">
                <span class="oi oi-list-rich" aria-hidden="true"></span> 添加圖書
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="FileUpload1">
                <span class="oi oi-list-rich" aria-hidden="true"></span> 上傳文件
            </NavLink>
        </div>
    </nav>
</div>

 
@code {
   private bool collapseNavMenu = true;

     private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {

        collapseNavMenu = !collapseNavMenu;

    }

} 

     5. 在Visual Studio 2022的菜單欄上,找到“調試à開始調試”或是按F5鍵,Visual Studio 2022會生成BlazorAppDemo應用程式,併在瀏覽器中打開Home頁面,我們使用滑鼠點擊左邊的菜單欄上的“上傳文件”菜單項,頁面會進入“FileUpload1”頁面,我們會看到我們寫的圖書列表頁面,如下圖。

 

6. 我們在“多文件上傳示例”中選擇一個上傳文件,然後應用程式會自動上傳文件,但是卻會提示錯誤,錯誤信息如下圖中1處,指明“找不到路徑的一部分”。我們打開資源管理器,在項目中找一下圖中2處的目錄,發現沒有這樣的目錄結構。我們手動創建一下即可。

 

7. 我們在“多文件上傳示例”中選擇一個上傳文件,然後應用程式會自動上傳文件,上傳到到目錄中卻不是我們選擇的文件名,是一個隨機的文件名。如下圖。

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 之前一直眼饞Sipeed的Tang系列,正好遇到有工程需要高速控制並行匯流排,就買了NANO 9K和Primer 20K試試水 買回來先拆的貴的20k,結果發現Sipeed設計師有奇怪的腦迴路: 核心板沒有指示燈,沒有集成下載器 tf卡在核心板與底板中間藏著,JTAG絲印在背面 JTAG介面和官 ...
  • 介紹jdk JDK是Java語言的軟體開發工具包,主要用於移動設備、嵌入式設備上的java應用程式。JDK是整個java開發的核心,它包含了JAVA的運行環境(JVM+Java系統類庫)和JAVA工具。 介紹jre 包括Java虛擬機 (jvm) .Java核心類庫和支持文件。它不包含開發工具(JD ...
  • 文主要介紹 Kibana 的使用,文中所使用到的軟體版本:Elasticsearch 8.5.1、Kibana 8.5.1、Centos 7.9。 1、安裝示例數據集 Kibana 自帶有 3 個數據集,一個數據集描述了過去 10 天的航班信息,一個數據集代表電子商務平臺的訂單,還有個數據集表示 W ...
  • 1.異常處理 異常:在運行代碼過程中遇到的任何錯誤,大有error字樣的都為異常 異常處理:對代碼中所有可能會出現的異常進行處理 疑問:我們為什麼要處理異常? 2.異常代碼 import os #創建一個已存在的文件夾 os.mkdir("Eclipse") #異常:FileExistsError: ...
  • 備份文件同步法 最傳統的方法就是把配置文件備份,然後在其它電腦上通過導入的方式來恢復,這種方法在很多軟體中都實測可行。 具體對應到pycharm中,可以在pycharm菜單欄file - export 和import在多臺電腦之間同步設置。 ps.pycharm的快捷鍵導入後,需要手動修改鍵盤映射修 ...
  • 本文主要介紹application.properties文件的配置方式、application.yml文件的配置方式,以及多環境配置時,可以通過總配置文件和Maven配置兩種方式進行切換。 ...
  • Kotlin + SpringBoot + JPA 服務端開發 本篇主要介紹一下 kotlin + springboot的服務端開發環境搭建 1.概述 Kotlin 是一個基於JVM的編程語言, 是IDEA開發工具 jetbrains 公司開發的語言,也被google選為android開發的首選語言 ...
  • 對於我們.Net程式員,System.Web.Abstractions我們都非常熟悉,主要作用於Web可以實現單元測試,他是在.Net framework 3.5 sp1開始引入的,很好的解決項目表示層不好做單元測試的問題,這個庫所有類都是Wrapper/Decorator模式的。今天給推薦一個IO ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...