文件上傳是 Web 開(kāi)發(fā)的必備技能，從簡(jiǎn)單的頭像上傳到復(fù)雜的網(wǎng)盤系統(tǒng)，其實(shí)現(xiàn)方式多種多樣。

姿勢(shì)一：經(jīng)典表單提交

這是最原始的方式，無(wú)需 JavaScript。通過(guò)一個(gè)簡(jiǎn)單的 HTML 表單，利用瀏覽器的默認(rèn)行為來(lái)完成上傳。

核心要點(diǎn)：

• <form> 標(biāo)簽的 method 必須為 POST。
• enctype 屬性必須設(shè)為 multipart/form-data。

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="myFile">
    <button type="submit">上傳</button>
</form>

優(yōu)點(diǎn)在于極致簡(jiǎn)單，兼容性無(wú)敵，但體驗(yàn)不好，上傳會(huì)導(dǎo)致頁(yè)面刷新或跳轉(zhuǎn)，不符合現(xiàn)代 Web 應(yīng)用的要求。

姿勢(shì)二：現(xiàn)代標(biāo)準(zhǔn) — Ajax 異步上傳

這是目前應(yīng)用最廣泛的方式，它提供了無(wú)刷新的流暢體驗(yàn)。核心是 FormData 對(duì)象，它可以模擬一個(gè)表單，并通過(guò) Ajax 技術(shù)（如 fetch）在后臺(tái)發(fā)送。

核心要點(diǎn)：

• 獲取用戶選擇的 File 對(duì)象。
• 創(chuàng)建 FormData 實(shí)例，并用 .append(key, file) 添加文件。
• 使用 fetch API 發(fā)送 FormData。

優(yōu)點(diǎn)在于，無(wú)須刷新頁(yè)面，功能強(qiáng)大（可實(shí)現(xiàn)進(jìn)度條、錯(cuò)誤處理）。

姿勢(shì)三：Base64 編碼

這種方式是將文件內(nèi)容讀取為一長(zhǎng)串 Base64 編碼的字符串，然后作為普通文本（通常是 JSON 的一部分）發(fā)送給服務(wù)器。

核心思想：使用 FileReader API 的 readAsDataURL 方法將文件轉(zhuǎn)換為 Base64 字符串。

這個(gè)方案的優(yōu)點(diǎn)在于能將文件嵌入到 JSON 中，后端處理可能更統(tǒng)一，只是編碼后體積會(huì)增大約 33%，特定需求小文件可用。

姿勢(shì)四：大文件殺手 — 分片上傳

對(duì)于 GB 級(jí)別的超大文件，一次性上傳風(fēng)險(xiǎn)極高，分片上傳是終極解決方案。

在前端使用 File.prototype.slice() 將大文件切成多個(gè)小塊（Chunk），為每個(gè)文件生成唯一標(biāo)識(shí)（如 Hash），然后上傳這些小塊，所有分片上傳完畢后，通知服務(wù)器將它們按順序合并成完整文件。

這個(gè)方案無(wú)懼網(wǎng)絡(luò)中斷，支持?jǐn)帱c(diǎn)續(xù)傳，但需要前后端深度配合。

在實(shí)際開(kāi)發(fā)中，Ajax + FormData 是我們的首選方案，根據(jù)需要，可增加拖拽/粘貼事件監(jiān)聽(tīng)優(yōu)化體驗(yàn)，用分片上傳來(lái)挑戰(zhàn)“BOSS”。