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

1. 前端文件上传流程

  1. 选择文件

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

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

    • 创建一个 FormData 对象,将文件内容以及其他相关参数(如文件名、类型等)追加到该对象中。
    • 通过 fetchaxios 发送 HTTP POST 请求,将文件数据传输到服务器。
  4. 处理响应

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

    • 使用 xhr.upload.onprogressaxiosonUploadProgress 事件实时更新上传进度条。

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

相关推荐
华仔啊32 分钟前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
Bacon1 小时前
前端:从0-1实现一个脚手架
前端
Bacon1 小时前
前端项目部署实战 nginx+docker持续集成
前端
beckyye1 小时前
阿里云智能语音简单使用:语音识别
前端·语音识别·录音
东东2332 小时前
前端规范工具之husky与lint-staged
前端·javascript·eslint
jump6802 小时前
手写事件总线、事件总线可能带来的内存泄露问题
前端
岁月宁静2 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
执沐2 小时前
基于HTML 使用星辰拼出爱心,并附带闪烁+流星+点击生成流星
前端·html
#做一个清醒的人2 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
拉不动的猪3 小时前
图文引用打包时的常见情景解析
前端·javascript·后端