前端上传组件实战攻略：从基础到进阶的全面解析
司空樱潼项目初期的技术选型
最近接了一个项目，需要实现一个文件上传功能。本来以为这事儿挺简单的，结果发现里面还是有不少坑的。项目背景就不多说了，反正就是需要用户上传一些文件，然后在后台处理这些文件。
一开始想着用传统的表单上传，毕竟最简单直接。但是客户要求要有进度条显示、支持大文件分片上传，还有各种格式校验。所以最后决定用Ant Design的Upload组件来实现这个功能。
开始动手写代码
首先，我找了一些Ant Design的文档和示例代码，看起来还挺简单的。直接上手吧，先搞个基本的文件选择功能。
import React, { useState } from 'react';
import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
const getBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
};
const beforeUpload = (file) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!');
}
const isLt2M = file.size / 1024 / 1024 {
const [loading, setLoading] = useState(false);
const [imageUrl, setImageUrl] = useState('');
const handleChange = async (info) => {
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj).then(url => {
setLoading(false);
setImageUrl(url);
});
}
};
const uploadButton = (
{loading ? : }
Upload
);
return (
{imageUrl ? 
: uploadButton}
);
};
export default Uploader;这段代码实现了基本的文件选择和上传功能，还带有一个进度条和预览图。看着挺不错的，但实际使用时发现了不少问题。
最大的坑：性能问题
在测试过程中，发现上传大文件时浏览器会卡顿，甚至有时候会崩溃。这显然是性能问题，开始没想到会这么严重。后来查了一下，发现是由于文件读取和上传过程中的数据处理导致的。
为了优化这个问题，我尝试了几个方案：
- 调整文件分片大小：将大文件分成多个小块进行上传，减少单次上传的数据量。
- 使用Web Workers：将文件读取和处理任务放到Web Workers中，避免阻塞主线程。
- 增加错误处理：增加更多的错误处理逻辑，防止浏览器崩溃。
经过一番折腾，最终选择了调整文件分片大小和增加错误处理的方案。这里需要注意的是，分片大小不能太小也不能太大，太小会导致请求次数过多，太大则会卡顿。我试了好几次，最后确定每片1MB左右比较合适。
const chunkSize = 1 * 1024 * 1024; // 1MB
const handleFileChunk = (file, index) => {
const chunk = file.slice(index * chunkSize, (index + 1) * chunkSize);
const formData = new FormData();
formData.append('chunk', chunk, file.name);
formData.append('index', index);
formData.append('total', Math.ceil(file.size / chunkSize));
return fetch('https://jztheme.com/api/upload', {
method: 'POST',
body: formData,
}).then(res => res.json());
};
const uploadFile = (file) => {
const chunksCount = Math.ceil(file.size / chunkSize);
const promises = [];
for (let i = 0; i {
const file = event.target.files[0];
if (file) {
uploadFile(file).then(response => {
console.log('Upload completed:', response);
}).catch(error => {
console.error('Upload failed:', error);
});
}
};这样处理后，上传大文件时的性能问题得到了显著改善。虽然还有些小问题，比如网络不稳定时会有部分分片丢失，但总体来说已经可以用了。
最终的解决方案
经过多次调整和测试，最终的解决方案如下：
- 使用文件分片上传，每片1MB。
- 增加错误处理，确保在网络不稳定时能够重试上传。
- 使用Web Workers进行文件读取和处理，避免阻塞主线程。
这样处理后，文件上传功能在大多数情况下都能正常工作，用户体验也得到了提升。当然，还有一些细节可以继续优化，比如更详细的错误提示和更友好的用户界面。
回顾与反思
这次项目让我深刻体会到文件上传功能的复杂性。虽然看起来很简单，但实际上涉及到很多细节和技术难点。通过这次项目，我学到了不少东西：
- 文件分片上传的重要性，特别是在处理大文件时。
- Web Workers在处理密集计算任务时的优势。
- 错误处理和重试机制对于提高系统稳定性的重要性。
总的来说，这次项目还算顺利，但也有一些小遗憾。比如有些细节没有处理得特别完美，但整体上已经能满足需求了。希望我的经验能对你有所帮助，如果有更好的解决方案或建议，欢迎交流！
