我想立即向用戶顯示他/她剛剛在 ReactJS 中上傳的檔案。目前，我正在使用此代碼。影像檔案未在 img 標記中呈現。（ <--PS 這不是 StackOverflow 或瀏覽器中影像渲染問題的問題。這就是外觀）
import { useState } from 'react';
export default function Upload() {
const [uploadedFile, setuploadedFile] = useState(null);
return (
<div>
<label htmlFor='upload-design'>
{uploadedFile ?
<img src={uploadedFile} /> :
<div>{/* some HTML here*/}</div>}
</label>
<input id='upload-design' type='file' onChange={e => setuploadedFile(e.target.files[0])} />
</div>
)
}
uj5u.com熱心網友回復：
您不能直接在<img src=''/>標簽中顯示檔案輸入值。首先，您需要將檔案輸入值轉換為base64然后顯示在<img />標簽中
試試下面的代碼它的作品！
function App() {
const [uploadedFile, setuploadedFile] = useState(null);
const base64FileURL = (element, callback) => {
let file = element;
let reader = new window.FileReader();
reader.onloadend = function (e) {
callback(e.target.result);
};
reader.readAsDataURL(file);
}
const handleFileChange = (file) => {
base64FileURL(file, (obj) => {
setuploadedFile(obj);
});
}
return (
<div>
<label htmlFor='upload-design'>
{uploadedFile ?
<img src={uploadedFile} /> :
<div>{/* some HTML here*/}</div>}
</label>
<input id='upload-design' type='file' onChange={e => handleFileChange(e.target.files[0])} />
</div>
);
};
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/417655.html
標籤：