当前位置：首页 > news >正文

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

news 2024/10/31 0:38:23

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;