我正在嘗試在上傳之前預覽影像檔案。
const [selectedFile, setSelectedFile] = useState<File>();
const [preview, setPreview] = useState<string>();
<form action="" onSubmit={onUploadImage}>
<input
name="file"
type="file"
accept="image/*"
onChange={(event: ChangeEvent<HTMLInputElement>) => {
if (!event.target.files) return
setSelectedFile(event.target.files[0]);
setPreview(URL.createObjectURL(event.target.files[0]));
}} />
<img src={preview} alt="preview" />
</form>
上面的代碼正在作業。
我想解決的問題是找到更好的方法來預覽影像檔案。
作為我的代碼，我將檔案型別設定為不允許selectedFile設定
為img 標簽useState<File>();selectedFile<img src={selectedFile} alt="以正確的方式上傳之前預覽檔案。（React&Typescript）" />。這就是為什么我創建了一個新狀態const [preview, setPreview] = useState<string>();來預覽影像而不是使用，selectedFile因為 src 應該是字串。但這是設定兩次狀態的麻煩方式。
如果您有更好的主意不要像我的代碼那樣使用雙重狀態，我將不勝感激。如果可能的話，我想繼續使用useState<File>()
uj5u.com熱心網友回復：
您應該首先選擇默認值selectedFile，null然后
直接設定src影像：
const [selectedFile, setSelectedFile] = useState<File | null>(null);
<input
onChange={(event: ChangeEvent<HTMLInputElement>) => {
if (!event.target.files) return
setSelectedFile(event.target.files[0]);
}}
/>
<img src={selectedFile === null ? '' : URL.createObjectURL(selectedFile)} alt="preview" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/476875.html