使用 Material UI 樣式化的檔案上傳元件

若要在 React 中將原生檔案選擇器設計成 Material UI 按鈕，請將按鈕設為標籤，並在其中放入隱藏的 <input type="file">。點擊標籤會開啟瀏覽器的檔案選擇器。這種做法只會選取檔案，不會將檔案傳送到伺服器。

在 React 中使用 Material UI 設定檔案上傳按鈕樣式

在 React 元件中使用以下模式：

<Button variant="contained" component="label">Choose file <input type="file" hidden /></Button>

Button 提供 Material UI 樣式，而 component="label" 會讓它的根元素成為標籤。隱藏的原生輸入框仍是開啟檔案選擇器的控制項。由於輸入框放在標籤內，點擊可見的按鈕就會啟用它，不需要另外撰寫點擊處理函式。hidden 屬性會隱藏輸入框本身的外觀，但不會停用檔案選擇功能。

將這段 JSX 加入已匯入適用 Button 的元件。Material UI 的匯入路徑取決於專案安裝的主版本，因此請使用該版本文件所述的路徑，不要假設所有專案都採用相同設定。這段程式碼是元件模式，不是完整應用程式；由於提供的執行環境證據沒有 React 或 Material UI 範例專案，因此此處未執行。

使用者選擇檔案後，瀏覽器會透過輸入框的 files 屬性提供所選檔案。若要處理選取事件，請加入 onChange 處理函式，並從該屬性讀取所選的 File。具體處理方式取決於應用程式需求，例如顯示檔名、驗證檔案，或準備檔案以供傳送。單是選取檔案並不會上傳檔案。若要將檔案傳送到伺服器，還需要其他應用程式邏輯，例如使用 FormData 建立請求並將其送到上傳端點。

你可以調整按鈕標籤、變體或其他支援的 Button 屬性，以符合介面需求。若要加入圖示，請使用與專案所安裝 Material UI 主版本相容的圖示套件及匯入路徑。此範例只說明標籤搭配隱藏輸入框的做法；它不假設特定專案設定，也不包含上傳服務的程式碼。