React中fileInput报错“未定义”，求文件上传功能解决方案

问题原因 #

• 代码中直接使用fileInput变量，但既没有通过React的DOM引用方法定义它，也没有在JSX中渲染对应的文件输入框
• 组件一加载就自动执行上传请求，没有等待用户选择文件的触发时机
• 请求头中手动设置Content-Type与FormData的自动头冲突，会导致上传失败

修正方案 #

1. 用useRef钩子获取文件输入框的DOM引用，这样才能访问用户选择的文件
2. 添加上传按钮，在用户点击时再执行上传逻辑，确保文件已被选择
3. 删除手动设置的Content-Type，让axios自动根据FormData生成正确的请求头

修正后的完整代码 #

import React, { useRef } from 'react';
import axios from 'axios';

function App () {
    // 创建ref用于获取文件输入框DOM
    const fileInputRef = useRef(null);

    // 定义上传函数，点击按钮时触发
    const handleUpload = () => {
        // 检查是否已选择文件
        if (!fileInputRef.current || !fileInputRef.current.files[0]) {
            console.log('请先选择文件');
            return;
        }

        const selectedFile = fileInputRef.current.files[0];
        const data = new FormData();
        // FormData.append(键名, 文件对象, 文件名)
        data.append('uploadFile', selectedFile, selectedFile.name);
        
        const config = {
            method: 'put',
            url: 'https://XXXX.execute-api.us-east-1.amazonaws.com/prod/XX/IMG_0733.jpg',
            headers: { 
                // 不需要手动设置Content-Type，axios会自动处理
                ...data.getHeaders()
            },
            data: data
        };
        
        axios(config)
        .then((response) => {
            console.log(JSON.stringify(response.data));
            alert('上传成功');
        })
        .catch((error) => {
            console.error('上传失败:', error);
        });
    };
    
    return (
        <div>Medium Tutorial
            <form>
                {/* 文件输入框，用ref关联DOM */}
                <input type="file" ref={fileInputRef} accept="image/jpeg" />
                {/* 上传按钮，点击触发上传 */}
                <button type="button" onClick={handleUpload}>上传文件</button>
            </form>
        </div>
    );
}

export default App;

额外说明 #

• accept="image/jpeg"限制只能选择jpg格式文件，可根据需求调整
• 上传前的文件校验（大小、格式）可以根据业务需求添加
• 如果后端需要特定的键名，修改FormData.append的第一个参数即可

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