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

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

article 2024/10/31 23:06:49

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;