如何用React（Next.js）结合Axios与PHP API实现图片上传

错误1：Cannot find name 'setSelectedFile' #

• 原因：未通过React的useState钩子声明文件状态变量，导致setSelectedFile未定义。
• 解决：在组件顶部引入useState并声明状态：

import { useState } from 'react';

const [selectedFile, setSelectedFile] = useState<File | null>(null);

错误2：Argument of type 'string | null' is not assignable to parameter of type 'string | Blob' #

• 原因：selectedFile可能为null，直接传入formData.append触发类型错误；手动设置Content-Type: multipart/form-data会丢失FormData自动生成的边界标识，导致后端无法解析请求。
• 解决：
  1. 上传前判断selectedFile是否存在，避免传入null；
  2. 移除Axios请求中手动设置的Content-Type，让浏览器自动处理请求头。

完整修正代码 #

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

const FileUploadComponent = () => {
  // 声明文件状态，指定类型为File或null
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    // 从事件中获取选中文件，更新状态
    setSelectedFile(event.target.files?.[0] || null);
  };

  const handleUpload = async () => {
    if (!selectedFile) {
      console.log('请先选择文件');
      return;
    }

    const formData = new FormData();
    // 确认文件存在后再添加到FormData
    formData.append("selectedFile", selectedFile);

    try {
      const response = await axios({
        method: "post",
        url: "/api/upload/file",
        data: formData,
        // 移除手动设置的Content-Type，由浏览器自动生成
      });
      console.log('上传成功', response.data);
    } catch(error) {
      console.log('上传失败', error);
    }
  };

  return (
    <div>
      <input 
        type="file"  
        className="file-upload-default"  
        onChange={handleFileSelect}
      />
      <button onClick={handleUpload}>上传图片</button>
    </div>
  );
};

export default FileUploadComponent;

额外注意 #

• PHP端需通过$_FILES['selectedFile']获取上传文件，确保服务器配置允许文件上传；
• 避免使用any类型，将事件参数类型指定为React.ChangeEvent<HTMLInputElement>，提升代码类型安全性。

内容的提问来源于stack exchange，提问作者sara sara