?廢話不多說直接上代碼：

function fileToBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (event) {const base64Data = event.target.result.split(',')[1];resolve(base64Data);};reader.onerror = function (error) {reject(error);};});
}

FileReader：

FileReader?接口允許 Web 應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用?File?或?Blob?對象指定要讀取的文件或數據。

文件對象可以從用戶使用?<input>?元素選擇文件而返回的?FileList?對象中獲取，或者從拖放操作的?DataTransfer?對象中獲取。

FileReader?只能訪問用戶明確選擇的文件內容，無論是使用 HTML?<input type="file">?元素還是通過拖放。它不能用于從用戶的文件系統中按路徑名讀取文件。要按路徑名讀取客戶端文件系統上的文件，請使用文件系統訪問 API。要讀取服務器端文件，請使用?fetch()，如果跨源讀取，則需要?CORS?權限。

二.code html5 標簽

<p>函數<code>selectAll()</code>將高亮顯示輸入字段中的所有文本，以便用戶可以復制或刪除文本。
</p>

注意：

要表示多行代碼，可在?<pre>?元素中封裝?<code>?元素。<code>?元素本身只能表示一段代碼短語或一行代碼。

可為?code?選擇器定義 CSS 規則，以覆蓋瀏覽器的默認字體。用戶設置的首選項可能優先于指定的 CSS。

<pre>
<code></code>
</pre>