圖片上傳後 URL 不變導致瀏覽器載入舊圖片 — 快取問題解決方案

問題現象

使用者上傳圖片後，URL 不變（同一路徑覆蓋）。首次上傳正常顯示，但連續快速上傳多張圖片時，瀏覽器仍顯示舊圖片或更早版本，無法載入最新上傳的圖片。

根因分析：瀏覽器快取機制

瀏覽器對同一 URL 請求會發送 If-Modified-Since 標頭，包含上次請求資源的最後修改時間（精確到秒）。流程如下：

1. 瀏覽器請求圖片，攜帶 If-Modified-Since: <上次修改時間>
2. 伺服器比對資源當前修改時間：
3. 若一致 → 返回 304 Not Modified (無內容)，瀏覽器直接使用本地快取
4. 若不一致 → 返回 200 OK + 新檔案內容，瀏覽器更新快取並顯示

問題關鍵：修改時間精確到「秒」。若上傳操作極快（同一秒內多次覆蓋），伺服器判定修改時間未變，返回 304，瀏覽器繼續顯示舊快取。

解決方案：URL 參數指紋化

在請求 URL 後附加隨機參數（或時間戳、版本號），強制瀏覽器視為新資源：

// JavaScript 範例
var imgUrl = "https://example.com/static/img/avatar.png?r=" + Math.random();
// 或使用時間戳
var imgUrl = "https://example.com/static/img/avatar.png?v=" + Date.now();

優缺點對比

進階方案：後端配置快取控制

在伺服器端 (Nginx/Apache/Tomcat) 針對上傳圖片目錄設定：

# Nginx 範例：禁用快取或短期快取
location /uploads/ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

適用場景延伸

此方法同樣適用於：

• iframe 載入同一 URL 內容不更新
• CSS/JS 檔案更新後瀏覽器未重新載入
• AJAX 請求回傳舊資料

總結

「URL 不變、內容變」是經典快取陷阱。前端加隨機參數最快見效；長期專案建議引入「檔案指紋/版本號」機制，兼顧快取效能與更新即時性。