react如何上传文件到后台

使用FormData上传文件

在React中上传文件到后台通常使用FormData对象。创建一个FormData实例，将文件数据附加到其中，然后通过fetch或axios发送到服务器。

const handleFileUpload = (event) => {
  const file = event.target.files[0];
  const formData = new FormData();
  formData.append('file', file);

  fetch('/api/upload', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
};

使用axios发送文件

如果项目中使用axios，可以更简洁地处理文件上传。确保设置Content-Type为multipart/form-data。

import axios from 'axios';

const uploadFile = (file) => {
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
};

文件输入组件

在React中，文件输入通常通过<input type="file">实现。绑定onChange事件以捕获用户选择的文件。

<input type="file" onChange={handleFileUpload} />

处理多文件上传

如果需要上传多个文件，可以通过遍历文件列表将多个文件添加到FormData中。

const handleMultipleFiles = (event) => {
  const files = event.target.files;
  const formData = new FormData();

  Array.from(files).forEach(file => {
    formData.append('files', file);
  });

  axios.post('/api/upload-multiple', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })
  .then(response => console.log(response.data));
};

显示上传进度

对于大文件上传，可以通过axios的onUploadProgress回调显示上传进度。

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`${percentCompleted}% uploaded`);
  },
})
.then(response => console.log(response.data));

服务器端配置

确保服务器端正确配置接收文件。以Node.js为例，使用multer中间件处理文件上传。

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.json({ message: 'File uploaded successfully' });
});

前端验证文件类型和大小

在上传前验证文件类型和大小，避免无效上传。

const validateFile = (file) => {
  const validTypes = ['image/jpeg', 'image/png'];
  const maxSize = 5 * 1024 * 1024; // 5MB

  if (!validTypes.includes(file.type)) {
    alert('Only JPEG and PNG files are allowed');
    return false;
  }

  if (file.size > maxSize) {
    alert('File size must be less than 5MB');
    return false;
  }

  return true;
};

使用第三方库简化流程

对于更复杂的需求，可以使用如react-dropzone等第三方库简化文件上传逻辑。

import { useDropzone } from 'react-dropzone';

const MyDropzone = () => {
  const { getRootProps, getInputProps } = useDropzone({
    onDrop: acceptedFiles => {
      const formData = new FormData();
      formData.append('file', acceptedFiles[0]);
      axios.post('/api/upload', formData);
    },
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>Drag and drop a file here, or click to select</p>
    </div>
  );
};