終於完賽了，很感謝iT邦幫忙鐵人賽這個活動，讓我在30天內因為要發文而不斷的學習，原本是一個下了班就坐在電視機前面不停轉台的沙發馬鈴薯，這30天的參賽日晚上都乖乖的坐在電腦前為了發文而學習，雖然發文內容簡短技術性的內容也不夠充足，但覺得日子很充實，雖然完賽了但接下來如果有時間想再增修補足一些內容，讓文章更有實用性。也謝謝唯一的訂閱者和撥空看我文章的同好，謝謝。

圖檔選擇器，符合檔案格式” image/png", "image/jpg" ,"image/svg”會顯示圖片，圖片格式錯鋘會出現：
檔案格式錯誤，請重新選擇。

import React,{useState} from 'react';
import './App.css';

const App = () => {
  const [imgView,setimgView]= useState(null);
  const [error, setError] = useState(false);
  const handleImageChange = (ele) => {
    setError(false);
    const selected = ele.target.files[0];
    const ALLOWED_TYPES = ["image/png", "image/jpg" ,"image/svg"];
    if(selected && ALLOWED_TYPES.includes(selected.type)){
      let reader = new FileReader();
      reader.onloadend =()=>{
         setimgView(reader.result);
      }
      reader.readAsDataURL(selected);
    }else{
      setError(true);      
    }
  }

  return (
    <div className="main">    
     <div className="container">
     <h1>Image Preview Box</h1>
       {error && <p className="errorMsg">檔案格式錯誤，請重新選擇</p>}
       <div 
       className="imgView"
       style={{background:imgView ? `url("${imgView}") no-repeat center/cover` : "#9A9483"}}
       >
         {!imgView && (
           <>
          <p>Add an image</p>
          <label htmlFor = "fileUpload" className="customFileUpload">
          請選擇圖檔</label>       
          <input type="file" id="fileUpload" onChange={handleImageChange} />
          <span>(png, jpg or svg)</span>
          </>
         )}
       </div>
       {imgView && <button onClick={()=>setimgView(null)}>Remove Image</button>}
      </div>
    </div>
  )
}

export default App;