前端文件上传组件流程的封装
1. 前端文件上传流程
-
选择文件:
- 用户点击上传按钮,选择要上传的文件。
- 使用
<input type="file">
或FileReader
API 读取文件。
-
文件校验:
- 校验文件的大小、格式等信息,提前过滤掉不符合要求的文件,避免浪费资源。
-
发送请求:
- 创建一个
FormData
对象,将文件内容以及其他相关参数(如文件名、类型等)追加到该对象中。 - 通过
fetch
或axios
发送 HTTP POST 请求,将文件数据传输到服务器。
- 创建一个
-
处理响应:
- 根据服务器响应处理上传结果,比如展示成功、失败信息或进行错误重试。
- 如果是分片上传,需追踪每一片的状态和位置。
-
显示上传进度(可选):
- 使用
xhr.upload.onprogress
或axios
的onUploadProgress
事件实时更新上传进度条。
- 使用
2. 封装文件上传组件
一个简单的上传组件封装可以包括以下内容:
import React, { useState } from 'react';
import axios from 'axios';
const UploadComponent = ({ uploadUrl }) => {
const [progress, setProgress] = useState(0);
const [status, setStatus] = useState('');
const handleFileChange = async (event) => {
const file = event.target.files[0];
if (!file) return;
// 文件大小限制(如10MB)
if (file.size > 10 * 1024 * 1024) {
alert('文件太大');
return;
}
// FormData 用于文件上传
const formData = new FormData();
formData.append('file', file);
try {
setStatus('Uploading...');
const response = await axios.post(uploadUrl, formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (progressEvent) => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
setProgress(percent);
},
});
setStatus('Upload successful');
console.log('Server response:', response.data);
} catch (error) {
setStatus('Upload failed');
console.error('Upload error:', error);
}
};
return (
<div>
<input type="file" onChange={handleFileChange} />
<p>Progress: {progress}%</p>
<p>Status: {status}</p>
</div>
);
};
export default UploadComponent;
3. 关键部分的说明
- 文件大小限制:封装文件上传组件时,确保在组件内部处理文件大小、类型等校验。
- 进度展示:
onUploadProgress
回调可以实时显示上传进度。 - 错误处理:增加 try-catch 处理上传过程中的错误,保证上传失败时能给用户提示。
4. 后端支持
后端应有对应的文件接收接口,处理 multipart/form-data
格式的请求,存储文件并返回响应