A. HTML前端的A標簽怎麼實現和base64結合
用js將url轉base64然後賦值給a標簽
請採納
B. 前端圖片上傳的兩種邏輯分析
用戶在表單中選擇文件/圖片後即發送請求，後端將文件存入伺服器，返迴文件對應id，用戶提交表單時帶上此id，實現表單與文件的關聯。
用戶選擇圖片後，前端使用FileReader()對象將其轉換成base64地址，只在前端進行圖片預覽。表單提交時，將base64轉換成file文件，先上傳圖片，再提交表單。
C. 前端路由（1）：基礎知識
URI： Uniform Resource Identifier 統一資源標識符； 由5部分組成：
URI = scheme:[//authority]path[?query][#fragment]
scheme： 協議 常見的有 http , https , file等
authority: 可以由三部分組成 [userinfo]host:[port]
其中userinfo指用戶信息，可以通過authority中的userinfo進行的登錄（當然現在前端應用並不會這么做）
host指的是主機地址，可以是ipv4或者是用方括弧括起來的ipv6地址，或者是可以通過DNS解析成ip地址的域名，如www..com
port指埠號， 如果不指定則使用默認埠號，http默認埠號80， https默認埠號443
path: 指文件路徑，指定伺服器上文件路徑以訪問特定資源
query： 查詢字元串 又稱search值 get介面傳參會通過此部分進行傳輸
fragment： 片段標識符 又稱hash值， 通常用於標記已獲取資源的子資源，不會被傳遞到伺服器端
關於編碼：
URI是用的是百分號編碼，對於需要編碼的字元，將其表示為2個十六進制的字元，然後在其前面加入轉義字元%
兩個編碼api：
encodeURI 與 encodeURIComponent： encodeURI編碼的范圍比encodeURIComponent要小 ，其中encodeURI是w3c的標准。
window.history對象存在很多屬性， 比較重點關注的有：
readonly length: number;
readonly state: any;
方法：
pushState(state: any, title: string, url?: string | null) : void;
replaceState(state: any, title: string, url?: string | null) : void;
go(delta: number): void 與 back():void; forward():void;
第一個參數需要是可被結構化復制的數據類型， （結構化復制： 可以處理循環引用的JSON），會持久化存儲在瀏覽器內部，在每次頁面生成的時候會被重新提取出來（屬於瀏覽器實現的深拷貝）
第二個參數title傳字元串，用於標記當前方法
第三個參數url，可以傳簡單字元串，也可以傳url對象，需要注意的是因為此方法被同源策略所限制，url必須與當前href同源，否則會報錯。此參數可以不傳，不傳的時候就是單純的操作瀏覽器歷史棧。
方法作用： 生成一個新的歷史棧並將指針指向它，操作並不會刷新瀏覽器，也就是說此方法會改變瀏覽器的歷史棧length，和state對象；
replaceState與pushState參數完全相同，使用方法類似，但其作用是替換當前歷史棧，也就是說歷史棧的指針與長度不會發生變化，其作用僅僅是替換當前的url與state。
pushState與replaceState方法其url傳參方式多種多樣，可以是絕對路徑，也可以是相對路徑，也可以傳遞查詢字元串search值"?xxx"與片段標識符"#xxx"，其最大特點是操作瀏覽器url，history對象的state與length屬性，但不會觸發瀏覽器跳轉。
pushState與replaceState方法以相對路徑方式進行操作url的時候，會受到當前html的<base>元素的href的影響，此時base元素的href會替換瀏覽器的url的href作為基準值進行相對路徑跳轉。
瀏覽器的跳轉方法主要圍繞window.location與window.history這兩個對象進行。
1) window.history
window.history.go(delta: number): void;
移動瀏覽器歷史棧指針並且刷新頁面
window.history.back() === window.history.go(-1)
window.history.forward() === window.history.go(1)
2) window.location
window.location.href
get :() =>string;
set : (url: string) => void; // 觸發瀏覽器跳轉 並增加歷史棧 不收同源策略限制
window.location.hash
get: () => string;
set: (hash: string) => void;
與href類似，其區別是用於修改瀏覽器導航欄url的hash值，會產生新的歷史棧，但不會觸發瀏覽器頁面刷新，並且在set hash值與當前url的hash值相同時，不會有任何事發生（等於沒執行）。
window.location.replace
這是一個純方法，其作用是替換當前瀏覽器的棧記錄，設置為傳入新的URL，並且刷新頁面。
replace可以對hash進行操作並且觸發對應的事件，不會受相同hash的規則影響
1） popstate事件
history.pushState與history.replaceState產生的歷史棧記錄中，如果棧指針發生了移動，或者點擊了瀏覽器的前進或者回退按鈕時，會觸發popstate事件，可以通過window.addEventListener去添加事件監聽。
popstate拿到的event對象最關鍵的屬性是event.state，這個event.state是直接從瀏覽器底層存儲器中取出（屬於深拷貝），而非從歷史棧中的state取出，因此直接修改歷史棧state並不會對event.state造成影響（反之亦然）。
前後兩次設置相同的location.hash時不會觸發兩次popstate事件，但是通過location.href設置兩次相同的hash可以，雖然可以觸發兩次popstate事件，但是歷史棧只會增加一層。
2）hashchange事件
hashchange時間監聽的是瀏覽器url的片段標識符的變化，也就是hash值的變化，事件對象event可以拿到關鍵的oldUrl和newUrl，表示hash跳轉前的url和跳轉後的url。
pushState方法即使是只改動了瀏覽器的hash值，也不會觸發hashchange事件。
這兩個事件都可以通過window.dispatchEvent方法去觸發，dispatchEvent方法需要傳入一個事件對象：
window.dispatchEvent(new PopStateEvent());
對於hashchang事件同理：
window.dispatchEvent(new HashChangeEvent());