React中如何收集表单标题与上传文件并通过Axios存入数据库

核心思路 #

文件输入框无法像文本框那样做双向绑定，你需要通过onChange事件获取选中的文件对象，再和标题一起用FormData格式提交（这是上传文件的标准方式，后端也能正确解析）。

具体实现步骤 #

1. 维护文件状态 #

用useState初始化文件状态，在文件输入的onChange回调里获取选中的第一个文件：

import { useState } from 'react';
import axios from 'axios';

const AddReport = () => {
  const [title, setTitle] = useState('');
  const [selectedFile, setSelectedFile] = useState(null);

  // 处理标题输入
  const handleTitle = (e) => {
    setTitle(e.target.value);
  };

  // 处理文件选择
  const uploadHandler = (e) => {
    // 获取选中的第一个文件
    setSelectedFile(e.target.files[0]);
  };

2. 表单提交与数据整合 #

在提交函数中，创建FormData对象，把标题和文件都添加进去，再用Axios发送请求。注意要阻止表单默认提交行为：

const handleUploadSubmit = async (e) => {
    e.preventDefault(); // 阻止表单默认刷新行为
    
    if (!title || !selectedFile) {
      alert('请填写标题并选择文件');
      return;
    }

    // 创建FormData对象，用于存储表单数据和文件
    const formData = new FormData();
    formData.append('title', title);
    formData.append('reportFile', selectedFile); // 这里的key要和后端接口约定一致

    try {
      // 用Axios发送POST请求
      await axios.post('/api/upload-report', formData, {
        headers: {
          'Content-Type': 'multipart/form-data', // 必须设置这个请求头
        },
      });
      // 提交成功后的操作，比如清空表单、提示用户
      setTitle('');
      setSelectedFile(null);
      alert('文件上传成功');
    } catch (error) {
      console.error('上传失败:', error);
      alert('文件上传失败，请重试');
    }
  };

3. 修正组件渲染代码 #

注意按钮不要同时绑定onClick和表单的onSubmit，只需要表单绑定onSubmit即可，按钮类型设为submit：

return (
    <form onSubmit={handleUploadSubmit}>
      <div>
        <label>Title</label>
        <input 
          type="text" 
          placeholder="|Add a title " 
          onChange={handleTitle} 
          value={title}
        />
      </div>

      <div>
        <input 
          type="file"  
          onChange={uploadHandler}
          accept=".pdf,.jpg,.png" // 限制可选文件类型，更友好
        />
        <p className='p-2 mx-[70px] text-sm'>Add Report files(PDF, JPG, PNG)</p>
      </div>
      <button type="submit"> {/* 这里设置type为submit，不需要额外onClick */}
        <span className='px-[10px] '>Upload Report</span>
      </button> 
    </form>
  );
};

export default AddReport;

注意事项 #

• 后端接口要支持multipart/form-data格式的请求，才能正确解析文件和表单数据
• FormData的键名（比如title、reportFile）要和后端接收的参数名一致
• 可以额外添加文件大小、类型的校验逻辑，进一步提升用户体验

内容的提问来源于stack exchange，提问作者Dr. Tech