废话不多说直接上代码:
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>