今天來到最後一步驟，就是先前有提到的圖片，一直把它擱置到現在，因為想了想他的流程覺得最為複雜，把苦的留到最後一刻。

編輯頁面預留了一個上傳圖片的位置，在這是要讓使用者可以上傳圖片，在前台可以看到畫面的顯示功能，這部分可以用最簡單的方式完成。

1. input按鈕點擊上傳圖片: 利用accept="image/*"限制格式，onChange後會將檔案放入imageUpload中。
2. 原生的input按鈕樣式: 可以使用label修改，先將input隱藏，再用htmlFor和id的方式將label與input綁在一起，點label便會觸發input。
3. 讓上傳的圖片可以在畫面預覽: img綁定previewImg ，當imageUpload有值時，顯示用createObjectURL產生URL的圖檔位置；若無則顯示空值(在這我有另外用css做了一個預設圖)

function NewPost(){
    //略
    const [imageUpload, setImageUpload] = useState(null);
    const previewImg = imageUpload ? URL.createObjectURL(imageUpload) : ""
  
    return(
			//略
       <div className="flex">
	        <div className="imgwrap">
	             <img src={previewImg} alt="" />
	        </div>
	        <label className="uploadbtn" htmlFor="upload" >上傳</label>
	        <input type="file" accept="image/*" id="upload" 
	            onChange={(e)=>setImageUpload(e.target.files[0])}/>
		    </div>
    )
}

今天的時間好像只能先到這邊，明天要再繼續圖片的設定。