我只想在 react 上創建簡單的檔案上傳組件。這很簡單，在選擇檔案并提交上傳按鈕后，它會給出一個帶有檔案名的訊息，如“你上傳的檔案名.txt”。我已經嘗試搜索了很多資源，但它大多超出了我的需要，如果有人可以幫助我，那就太好了。謝謝！
uj5u.com熱心網友回復：
您可以使用 onChange 事件偵聽器檢測檔案選擇，您可以通過 e.target.files 訪問所選檔案的名稱，它回傳所有已選擇的檔案，我們將獲取第一個選擇的檔案并存盤其名稱一個名為 selectedFileName 的狀態中的值。在渲染期間，我們將檢查 selectedFileName 狀態是否具有值，我們將在 ap 標記內顯示它。
import React, { useState } from 'react';
export const App = () => {
const [selectedFileName, setSelectedFileName] = useState('');
const [displayFileName, setDisplayFileName] = useState(false);
const submitFile = () => setDisplayFileName(true);
const handleFileSelect = e => {
const selectedFile = e.target.files[0];
setDisplayFileName(false);
setSelectedFileName(selectedFile?.name);
};
return (
<div>
<input
type='file'
accept='*'
name='fileSelect'
onChange={handleFileSelect}
/>
{displayFileName ? (
<p>{ selectedFileName?`You Uploaded '${selectedFileName}'`:"Please select a file!"}</p>
) : (
<button value='Submit' onClick={submitFile}>
Submit File
</button>
)}
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521533.html
標籤：反应上传文件