前端文件上传处理最佳实践
毒舌时刻
文件上传？听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便加个 input[type="file"] 就能实现文件上传？别做梦了！到时候你会发现，大文件上传会导致页面崩溃，用户体验极差。
你以为 FormData 就能解决所有问题？别天真了！FormData 在处理大文件时会导致内存溢出，而且无法显示上传进度。还有那些所谓的文件上传库，看起来高大上，用起来却各种问题。
为什么你需要这个
- 用户体验：良好的文件上传处理可以提高用户体验，减少用户等待时间。
- 性能优化：合理的文件上传策略可以减少服务器负担，提高上传速度。
- 错误处理：完善的错误处理可以避免上传失败时的用户困惑。
- 安全保障：安全的文件上传处理可以防止恶意文件上传，保障系统安全。
- 功能丰富：支持多文件上传、拖拽上传、进度显示等功能，满足不同场景的需求。
反面教材
// 1. 简单文件上传
<input type="file" id="fileInput">
<button onclick="uploadFile()">Upload</button>
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
}
// 2. 忽略文件大小限制
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file.size > 10 * 1024 * 1024) { // 10MB
alert('File too large');
return;
}
// 上传逻辑
}
// 3. 忽略文件类型限制
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!allowedTypes.includes(file.type)) {
alert('Invalid file type');
return;
}
// 上传逻辑
}
// 4. 缺少进度显示
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
}
// 5. 忽略错误处理
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data));
}
问题：
- 简单文件上传，无法处理大文件
- 忽略文件大小限制，导致服务器负担过重
- 忽略文件类型限制，可能上传恶意文件
- 缺少进度显示，用户体验差
- 忽略错误处理，上传失败时用户不知道原因
正确的做法
基本文件上传
// 1. 单文件上传
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
// 验证文件大小
if (file.size > 10 * 1024 * 1024) { // 10MB
alert('File too large');
return;
}
// 验证文件类型
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!allowedTypes.includes(file.type)) {
alert('Invalid file type');
return;
}
const formData = new FormData();
formData.append('file', file);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Upload failed');
}
return response.json();
})
.then(data => {
console.log('Upload successful:', data);
alert('File uploaded successfully');
})
.catch(error => {
console.error('Upload error:', error);
alert('Upload failed: ' + error.message);
});
}
// 2. 多文件上传
function uploadFiles() {
const fileInput = document.getElementById('fileInput');
const files = fileInput.files;
if (files.length === 0) {
alert('Please select files');
return;
}
// 验证文件大小和类型
for (const file of files) {
if (file.size > 10 * 1024 * 1024) { // 10MB
alert(`File ${file.name} is too large`);
return;
}
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!allowedTypes.includes(file.type)) {
alert(`File ${file.name} has invalid type`);
return;
}
}
const formData = new FormData();
for (const file of files) {
formData.append('files', file);
}
fetch('/api/upload-multiple', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Upload failed');
}
return response.json();
})
.then(data => {
console.log('Upload successful:', data);
alert('Files uploaded successfully');
})
.catch(error => {
console.error('Upload error:', error);
alert('Upload failed: ' + error.message);
});
}
带进度显示的文件上传
function uploadFileWithProgress() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const progressBar = document.getElementById('progressBar');
if (!file) {
alert('Please select a file');
return;
}
const formData = new FormData();
formData.append('file', file);
fetch('/api/upload', {
method: 'POST',
body: formData,
// 添加进度监听
onUploadProgress: function(progressEvent) {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
progressBar.style.width = percentCompleted + '%';
progressBar.textContent = percentCompleted + '%';
}
})
.then(response => {
if (!response.ok) {
throw new Error('Upload failed');
}
return response.json();
})
.then(data => {
console.log('Upload successful:', data);
alert('File uploaded successfully');
})
.catch(error => {
console.error('Upload error:', error);
alert('Upload failed: ' + error.message);
});
}
// 使用 XMLHttpRequest 实现进度显示
function uploadFileWithProgressXHR() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const progressBar = document.getElementById('progressBar');
if (!file) {
alert('Please select a file');
return;
}
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
const percentCompleted = Math.round((event.loaded * 100) / event.total);
progressBar.style.width = percentCompleted + '%';
progressBar.textContent = percentCompleted + '%';
}
});
xhr.addEventListener('load', function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log('Upload successful:', data);
alert('File uploaded successfully');
} else {
console.error('Upload error:', xhr.statusText);
alert('Upload failed: ' + xhr.statusText);
}
});
xhr.addEventListener('error', function() {
console.error('Upload error');
alert('Upload failed');
});
xhr.open('POST', '/api/upload');
xhr.send(formData);
}
拖拽上传
function setupDragAndDrop() {
const dropArea = document.getElementById('dropArea');
// 拖拽事件
dropArea.addEventListener('dragover', function(event) {
event.preventDefault();
dropArea.classList.add('drag-over');
});
dropArea.addEventListener('dragleave', function() {
dropArea.classList.remove('drag-over');
});
dropArea.addEventListener('drop', function(event) {
event.preventDefault();
dropArea.classList.remove('drag-over');
const files = event.dataTransfer.files;
if (files.length > 0) {
uploadFiles(files);
}
});
// 点击上传
dropArea.addEventListener('click', function() {
document.getElementById('fileInput').click();
});
// 文件选择
document.getElementById('fileInput').addEventListener('change', function() {
const files = this.files;
if (files.length > 0) {
uploadFiles(files);
}
});
}
function uploadFiles(files) {
// 验证文件
for (const file of files) {
if (file.size > 10 * 1024 * 1024) { // 10MB
alert(`File ${file.name} is too large`);
return;
}
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!allowedTypes.includes(file.type)) {
alert(`File ${file.name} has invalid type`);
return;
}
}
// 上传逻辑
const formData = new FormData();
for (const file of files) {
formData.append('files', file);
}
// 上传代码...
}
大文件分块上传
async function uploadLargeFile(file) {
const chunkSize = 1024 * 1024; // 1MB
const totalChunks = Math.ceil(file.size / chunkSize);
const fileId = generateFileId();
for (let i = 0; i < totalChunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, file.size);
const chunk = file.slice(start, end);
const formData = new FormData();
formData.append('file', chunk);
formData.append('fileId', fileId);
formData.append('chunkIndex', i);
formData.append('totalChunks', totalChunks);
formData.append('fileName', file.name);
try {
const response = await fetch('/api/upload-chunk', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error('Upload failed');
}
const data = await response.json();
console.log(`Chunk ${i + 1}/${totalChunks} uploaded:`, data);
} catch (error) {
console.error('Upload error:', error);
throw error;
}
}
// 通知服务器合并 chunks
const response = await fetch('/api/merge-chunks', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ fileId, fileName: file.name, totalChunks })
});
if (!response.ok) {
throw new Error('Merge failed');
}
const data = await response.json();
console.log('File uploaded successfully:', data);
return data;
}
function generateFileId() {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
最佳实践
// 1. 使用 FileReader 预览图片
function previewImage(file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.maxWidth = '200px';
document.getElementById('preview').appendChild(img);
};
reader.readAsDataURL(file);
}
// 2. 压缩图片
function compressImage(file, maxWidth = 800, maxHeight = 800, quality = 0.8) {
return new Promise((resolve) => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height = (height * maxWidth) / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width = (width * maxHeight) / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(function(blob) {
resolve(blob);
}, file.type, quality);
};
img.src = URL.createObjectURL(file);
});
}
// 3. 安全验证
function validateFile(file) {
// 验证文件大小
if (file.size > 10 * 1024 * 1024) { // 10MB
return { valid: false, message: 'File too large' };
}
// 验证文件类型
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
if (!allowedTypes.includes(file.type)) {
return { valid: false, message: 'Invalid file type' };
}
// 验证文件扩展名
const allowedExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf', '.doc', '.docx'];
const extension = file.name.substring(file.name.lastIndexOf('.'));
if (!allowedExtensions.includes(extension.toLowerCase())) {
return { valid: false, message: 'Invalid file extension' };
}
return { valid: true, message: 'File is valid' };
}
// 4. 上传状态管理
class UploadManager {
constructor() {
this.uploads = new Map();
}
async upload(file) {
const id = generateFileId();
const upload = { id, file, status: 'pending', progress: 0, error: null };
this.uploads.set(id, upload);
try {
upload.status = 'uploading';
// 上传逻辑
// ...
upload.status = 'completed';
upload.progress = 100;
} catch (error) {
upload.status = 'failed';
upload.error = error.message;
}
return upload;
}
getUpload(id) {
return this.uploads.get(id);
}
getAllUploads() {
return Array.from(this.uploads.values());
}
cancelUpload(id) {
const upload = this.uploads.get(id);
if (upload) {
upload.status = 'cancelled';
// 取消上传逻辑
// ...
}
}
}
// 使用
const uploadManager = new UploadManager();
const file = document.getElementById('fileInput').files[0];
uploadManager.upload(file).then(upload => {
console.log('Upload result:', upload);
});
毒舌点评
文件上传确实很重要，但我见过太多开发者滥用这个特性，导致应用变得过于复杂。
想象一下，当你为了实现大文件上传，使用了分块上传技术，结果导致代码变得非常复杂，这真的值得吗？
还有那些过度使用文件上传库的开发者，为了使用某个库，而忽略了项目的实际需求，结果导致代码变得过于复杂。
所以，在实现文件上传时，一定要根据实际需求来决定。不要为了实现所有功能而实现，要选择最适合的方案。
当然，对于需要上传大文件的应用来说，分块上传是必要的。但对于普通的文件上传需求，使用简单的 FormData 可能更加合适。
最后，记住一句话：文件上传的目的是为了方便用户上传文件，而不是为了炫技。如果你的文件上传实现导致用户体验变得更差，那你就失败了。
