前端文件上传方案：别再只用input type=file了
前端文件上传方案：别再只用input type=file了
毒舌时刻
这代码写得跟网红滤镜似的——仅供参考。
各位前端同行，咱们今天聊聊前端文件上传。别告诉我你还在用原生的input上传大文件，那感觉就像在用小水管灌满游泳池——慢得让人绝望。
为什么你需要文件上传方案
最近看到一个项目，上传100MB的文件直接卡死浏览器，没有任何进度提示，我差点当场去世。我就想问：你是在做上传还是在做浏览器杀手？
反面教材
<!-- 反面教材：原生文件上传 --> <input type="file" onchange="uploadFile(this.files[0])" /> <script> function uploadFile(file) { const formData = new FormData(); formData.append('file', file); // 直接上传，没有进度，没有断点续传 fetch('/api/upload', { method: 'POST', body: formData }); } </script> 毒舌点评：这代码，我看了都替你的用户着急。原生上传大文件，你是想让用户等到天荒地老吗？
前端文件上传的正确姿势
1. 分片上传
// 正确姿势：分片上传 class ChunkUploader { constructor(file, options = {}) { this.file = file; this.chunkSize = options.chunkSize || 1024 * 1024; // 1MB this.chunks = Math.ceil(file.size / this.chunkSize); this.uploadedChunks = 0; } async upload() { const promises = []; for (let i = 0; i < this.chunks; i++) { const start = i * this.chunkSize; const end = Math.min(start + this.chunkSize, this.file.size); const chunk = this.file.slice(start, end); promises.push(this.uploadChunk(chunk, i)); } await Promise.all(promises); await this.mergeChunks(); } async uploadChunk(chunk, index) { const formData = new FormData(); formData.append('chunk', chunk); formData.append('index', index); formData.append('total', this.chunks); formData.append('filename', this.file.name); await fetch('/api/upload/chunk', { method: 'POST', body: formData }); this.uploadedChunks++; this.onProgress(this.uploadedChunks / this.chunks); } onProgress(progress) { console.log(`上传进度: ${(progress * 100).toFixed(2)}%`); } async mergeChunks() { await fetch('/api/upload/merge', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ filename: this.file.name, chunks: this.chunks }) }); } } // 使用 const uploader = new ChunkUploader(file, { chunkSize: 1024 * 1024 }); uploader.upload(); 2. 断点续传
// 正确姿势：断点续传 class ResumableUploader { constructor(file) { this.file = file; this.chunkSize = 1024 * 1024; this.uploadedChunks = new Set(); } async init() { // 获取已上传的分片 const response = await fetch(`/api/upload/status?filename=${this.file.name}`); const { uploadedChunks } = await response.json(); this.uploadedChunks = new Set(uploadedChunks); } async upload() { const chunks = Math.ceil(this.file.size / this.chunkSize); for (let i = 0; i < chunks; i++) { if (this.uploadedChunks.has(i)) { console.log(`分片${i}已上传，跳过`); continue; } const start = i * this.chunkSize; const end = Math.min(start + this.chunkSize, this.file.size); const chunk = this.file.slice(start, end); await this.uploadChunk(chunk, i); this.uploadedChunks.add(i); // 保存进度到本地 localStorage.setItem('uploadProgress', JSON.stringify([...this.uploadedChunks])); } await this.mergeChunks(); localStorage.removeItem('uploadProgress'); } async uploadChunk(chunk, index) { // 上传逻辑... } } 3. 拖拽上传
// 正确姿势：拖拽上传 import { useCallback } from 'react'; function DragUpload({ onUpload }) { const handleDrop = useCallback((e) => { e.preventDefault(); const files = Array.from(e.dataTransfer.files); files.forEach(file => onUpload(file)); }, [onUpload]); const handleDragOver = useCallback((e) => { e.preventDefault(); }, []); return ( <div className="drag-upload" onDrop={handleDrop} onDragOver={handleDragOver} > <p>拖拽文件到此处上传</p> <input type="file" multiple onChange={(e) => { Array.from(e.target.files).forEach(file => onUpload(file)); }} /> </div> ); } 毒舌点评：早这么写，你的上传早就做好了。别告诉我你还在用原生input，那你还是趁早去用FTP吧。
实战技巧：文件上传指南
1. 上传优化策略
- 分片上传：大文件切分上传
- 断点续传：支持暂停恢复
- 并发控制：限制同时上传数量
- 进度显示：实时显示上传进度
2. 最佳实践
// ✅ 显示上传进度 const xhr = new XMLHttpRequest(); xhr.upload.onprogress = (e) => { const progress = (e.loaded / e.total) * 100; console.log(`${progress}%`); }; // ✅ 图片预览 const preview = URL.createObjectURL(file); // ✅ 文件类型检查 const allowedTypes = ['image/jpeg', 'image/png']; if (!allowedTypes.includes(file.type)) { alert('不支持的文件类型'); return; } 最后想说的
文件上传不是小事，是用户体验的关键。别再只用input type=file了——优化一下，你的上传会更专业。
文件上传就像快递，原生input像平邮，优化后的上传像顺丰。别让用户等平邮，给他们顺丰的体验。
