直接用 filereader.readasdataurl() 可在浏览器本地完成图片转 base64，无需请求服务器；通过 accept="image/*" 限制类型、正则校验 mime、大小检查及监听 load/error 事件确保健壮性，并支持 paste 截图解析。

直接用 FileReader.readAsDataURL() 就能完成——整个过程在浏览器本地执行，不发请求、不传服务器，选完图立刻显示，Base64 字符串也同步拿到。

绑定文件选择并校验类型

给 <input type="file"> 加上 accept="image/*" 限制可选范围，再监听 change 事件。获取文件后，别只比对完整 MIME 类型（比如 image/jpeg），用正则更稳妥：

• /^image\//.test(file.type) 能覆盖 image/png、image/webp、image/jpg 等常见格式
• 如果 files[0] 为空，说明用户取消了选择，需提前退出
• 建议加大小检查，比如超过 5MB 提示“文件过大”，避免卡顿或内存警告

用 FileReader 读取并获取 Base64

创建 FileReader 实例，调用 readAsDataURL(file) 启动读取。注意：result 属性只在 load 回调里有效，不能调完就立刻读：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• reader.onload = function() { const base64Str = this.result; }
• this.result 是完整 data URL，形如 data:image/jpeg;base64,/9j/4AAQ...，可直接赋值给 <img src>
• 务必同时监听 onerror，比如文件损坏或读取被中断时给出提示

展示预览与使用 Base64 数据

拿到 this.result 后，两件事可以同步做：

• 设为 <img src> 的值，实现即时预览
• 写入 <textarea></textarea> 或存进变量，供后续复制、提交表单或调试验证
• 若需用于 CSS，记得保留完整前缀：background-image: url("data:image/png;base64,iVBORw...");

额外支持：粘贴截图转 Base64

现代页面还可监听 paste 事件，从剪贴板提取图片：

• 遍历 event.clipboardData.items，筛选 type.startsWith("image/")
• 用 getAsFile() 转成 File 对象，再走一遍 FileReader 流程
• 粘贴图无文件名，如业务需要，可手动补一个默认名，比如 "screenshot.png"

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！