前端文件上传必会知识：从初级到高级

文件上传是 Web 前端开发的必备技能，从简单的头像上传到复杂的网盘系统，其实现方式多种多样。

一、经典表单提交

这是最原始的方式，无需 JavaScript。通过一个简单的 HTML 表单，利用浏览器的默认行为来完成上传。

核心要点：

• <form> 标签的 method 必须为 POST。
• enctype 属性必须设为 multipart/form-data。

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

优点在于极致简单，兼容性无敌，但体验不好，上传会导致页面刷新或跳转，不符合现代 Web 应用的要求。

二、现代标准 — Ajax 异步上传

这是目前应用最广泛的方式，它提供了无刷新的流畅体验。核心是 FormData 对象，它可以模拟一个表单，并通过 Ajax 技术（如 fetch）在后台发送。

核心要点：

1. 获取用户选择的 File 对象。
2. 创建 FormData 实例，并用 .append(key, file) 添加文件。
3. 使用 fetch API 发送 FormData。

const fileInput = document.querySelector('input[type="file"]');

async function uploadFile() {
    const file =fileInput.files[0];
    if(!file)return;
    const formData = new FormData();
    formData.append('file'，file); //'file'是与后端约定的字段名
    
    try {
        const response = await fetch('/upload', {
            method:'PoST',
            body:formData, // fetch 会自动设置正确的 Content-Type
        });
        const result = await response.json();
        console.log('上传成功:', result);
    } catch (error) {
        console.error('上传失败:'，error);
    }
}

优点在于，无须刷新页面，功能强大（可实现进度条、错误处理）。

三、Base64 编码

这种方式是将文件内容读取为一长串 Base64 编码的字符串，然后作为普通文本（通常是 JSON 的一部分）发送给服务器。

核心思想：

使用 FileReader API 的 readAsDataURL 方法将文件转换为 Base64 字符串。

这个方案的优点在于能将文件嵌入到 JSON 中，后端处理可能更统一，只是编码后体积会增大约 33%，特定需求小文件可用。

四、大文件杀手 — 分片上传

对于 GB 级别的超大文件，一次性上传风险极高，分片上传是终极解决方案。

在前端使用 File.prototype.slice() 将大文件切成多个小块（Chunk），为每个文件生成唯一标识（如 Hash），然后上传这些小块，所有分片上传完毕后，通知服务器将它们按顺序合并成完整文件。

这个方案无惧网络中断，支持断点续传，但需要前后端深度配合。

在实际开发中，Ajax + FormData 是我们的首选方案，根据需要，可增加拖拽/粘贴事件监听优化体验，用分片上传来挑战“BOSS”。

以上关于前端文件上传必会知识：从初级到高级的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。