当前位置：首页 > React

react如何上传文件

2026-01-15 08:44:53React

使用React上传文件的方法

使用HTML的input元素和FormData

创建一个文件输入字段，通过onChange事件获取文件对象，使用FormData将文件数据发送到服务器。

import React, { useState } from 'react';

function FileUpload() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleUpload = async () => {
    if (!selectedFile) return;

    const formData = new FormData();
    formData.append('file', selectedFile);

    try {
      const response = await fetch('https://your-api-endpoint.com/upload', {
        method: 'POST',
        body: formData,
      });
      const result = await response.json();
      console.log('Upload success:', result);
    } catch (error) {
      console.error('Upload error:', error);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}

使用第三方库如react-dropzone

react-dropzone提供了一个拖放文件上传的界面，简化了文件选择过程。

import React from 'react';
import { useDropzone } from 'react-dropzone';

function DropzoneUpload() {
  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

  const handleUpload = async () => {
    if (acceptedFiles.length === 0) return;

    const formData = new FormData();
    formData.append('file', acceptedFiles[0]);

    try {
      const response = await fetch('https://your-api-endpoint.com/upload', {
        method: 'POST',
        body: formData,
      });
      const result = await response.json();
      console.log('Upload success:', result);
    } catch (error) {
      console.error('Upload error:', error);
    }
  };

  return (
    <div>
      <div {...getRootProps({ className: 'dropzone' })}>
        <input {...getInputProps()} />
        <p>Drag and drop a file here, or click to select a file</p>
      </div>
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}

显示上传进度

通过监听XMLHttpRequest的progress事件，可以显示文件上传的进度。

const handleUploadWithProgress = () => {
  if (!selectedFile) return;

  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://your-api-endpoint.com/upload', true);

  xhr.upload.onprogress = (event) => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      console.log(`Upload progress: ${percentComplete}%`);
    }
  };

  xhr.onload = () => {
    if (xhr.status === 200) {
      console.log('Upload complete');
    } else {
      console.error('Upload failed');
    }
  };

  const formData = new FormData();
  formData.append('file', selectedFile);
  xhr.send(formData);
};

处理多文件上传

如果需要上传多个文件，可以将多个文件对象添加到FormData中。

const handleMultipleFilesUpload = async () => {
  const fileInput = document.getElementById('file-input');
  const files = fileInput.files;

  if (files.length === 0) return;

  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append('files', files[i]);
  }

  try {
    const response = await fetch('https://your-api-endpoint.com/upload', {
      method: 'POST',
      body: formData,
    });
    const result = await response.json();
    console.log('Upload success:', result);
  } catch (error) {
    console.error('Upload error:', error);
  }
};

注意事项