讓網站內容自己更新 · 第 03 章
編輯與上傳都要有明確限制
表單檢查放在前後端，圖片上傳驗證內容與大小，文章顯示避免任意程式碼。
貓老闆的簡報
上傳叫貓碗.jpg，不代表裡面真的是圖片。先檢查，再讓大家看到。
——貓掌櫃官網的老闆「掌櫃」下需求時的原話
這章做什麼
完成能存草稿、回報錯誤與安全處理圖片的編輯頁。
動手做
- 編輯頁提供清楚標籤、必填和儲存回饋；後端也驗證相同限制，錯誤時保留已填內容。
- 第一版採純文字或受限制的內容格式；顯示時正確跳脫或清理，不能直接執行使用者輸入的 HTML。
- 圖片先只允許 JPEG、PNG、WebP，檢查大小、實際可解碼內容與副檔名；後端產生檔名並放在不能執行程式的位置，不信任上傳者提供的路徑。
- 上傳與刪圖都需授權；圖片要能填替代文字。試傳非圖片與超過大小限制的檔案，確認被拒絕且不破壞原內容。
親手試試
模擬：大小與內容檢查通過，後端產生檔名，保存為可預覽的草稿圖片。
模擬：雖然名稱是 .jpg，但內容無法解碼為允許的圖片，拒絕儲存。
模擬：提示檔案過大，保留原圖片與已填文字。
這是上傳處理示意，不會讀取或上傳電腦檔案。
這樣對 AI 說
中文就可以
請製作文章與商品介紹的草稿編輯頁，前後端驗證欄位，錯誤保留輸入。第一版使用純文字或安全的受限格式，公開顯示不得直接執行輸入的 HTML。圖片僅允許 JPEG、PNG、WebP，依我確認的大小限制檢查實際內容，後端命名並安全儲存；上傳和刪除皆查權限，圖片有替代文字。請提供錯誤格式、過大檔案及無權限操作的驗收步驟。
本章驗收清單
請在自己的練習專案實際操作，再依結果逐項確認。
- 後端不接受超出限制的內容
- 文章輸入不能執行任意 HTML
- 假圖片與過大檔案被拒絕
- 圖片有授權檢查與替代文字
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
官方參考資料
進度只存在這台瀏覽器，不上傳、不追蹤。