前端文件上传组件流程的封装

1. 前端文件上传流程

1. 选择文件：

   • 用户点击上传按钮，选择要上传的文件。
   • 使用 <input type="file"> 或 FileReader API 读取文件。

2. 文件校验：

   • 校验文件的大小、格式等信息，提前过滤掉不符合要求的文件，避免浪费资源。

3. 发送请求：

   • 创建一个 FormData 对象，将文件内容以及其他相关参数（如文件名、类型等）追加到该对象中。
   • 通过 fetch 或 axios 发送 HTTP POST 请求，将文件数据传输到服务器。

4. 处理响应：

   • 根据服务器响应处理上传结果，比如展示成功、失败信息或进行错误重试。
   • 如果是分片上传，需追踪每一片的状态和位置。

5. 显示上传进度（可选）：

   • 使用 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 格式的请求，存储文件并返回响应