我正在做一個應用程式，我必須上傳檔案串列，或者我可以選擇一個按鈕并且檔案上傳是打開的，您是否推薦任何庫，或者我只是使用輸入元素進行本地操作？
uj5u.com熱心網友回復：
對于樣式和自定義 vanilla JS 的更多控制更好。這是一個簡單的檔案選擇器組件，它支持將檔案拖放到串列中。
const DropOrChooseFile = () => {
const [files, setFiles] = React.useState([]);
const onDropHandler = (ev) => {
ev.preventDefault();
let file = "";
if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
file =
[...ev.dataTransfer.items]
.find((item: any) => item.kind === "file")
.getAsFile() ;
} else {
// Use DataTransfer interface to access the file(s)
file = ev.dataTransfer.files[0];
}
setFiles([...files, file]);
};
const onDragOver = (ev) => ev.preventDefault();
return (
<div>
<div> Selected files: </div>
{files.map((file) => (
<div key={file.name} style={{color: "green",fontWeight: "bold" }}>{file.name}</div>
))}
<div style={{marginTop: 20}}></div>
<div id="drop_zone" onDrop={onDropHandler} onDragOver={onDragOver}>
<div>Drag and drop a file here</div>
<div> or </div>
<label htmlFor={"file_picker"} className="fp-label">
Select file
</label>
<input
id="file_picker"
type="file"
accept="image/png, image/jpeg"
onChange={(ev) => {
setFiles([...files, ev.target.files[0]]);
}}
style={{display: "none"}}
></input>
</div>
</div>
);
};
ReactDOM.render(<DropOrChooseFile />, document.getElementById("app"));#drop_zone {
display: grid;
width: 400px;
place-content: center;
border: 2px dashed lightgray;
padding: 16px;
text-align: center;
}
.fp-label {
border: 1px solid lightgray;
border-radius: 5px;
padding: 8px;
}<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="app"></div>uj5u.com熱心網友回復：
根據您提供的資訊，您的要求似乎可以通過簡單的（本機）輸入type=file和小的 UI 調整來滿足。
但是，在決定是否為這種情況安裝新軟體包之前，您應該考慮以下事項。
在某種情況下，您有一個檔案串列：
它可能需要一個佇列來上傳串列，從而提高上傳檔案的效率（和安全性）。
#UX,#reliability上傳時，絕對需要一個影片來說明每個檔案的進度。
#UX多個選定的檔案可能包含無意中選擇的不需要的檔案，上傳必須是可取消的（消除上傳檔案其余部分的可能請求）。
#UX
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/332670.html
上一篇：打字稿-無法訪問添加的回傳變數