Day30 小实作 Image Preview Box

终於完赛了，很感谢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;