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

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