无法更新formData：上传图片存入formData后显示为空

我想把上传的图片发送到后端，但是将图片追加到FormData后，打印FormData显示为空。不过打印file状态时，能看到确实存在图片文件。

代码 #

function UpdateProfile() {
    const [file, setFile]: any = useState(null);
    const handleSubmit = () => {
        const formData = new FormData();
        console.log(file);
        formData.append("profile", "file");
        console.log("formData", formData);
    };

    return (
        <>
            <Modal>
                    <ModalBody pb={6}>
                        <FormControl>
                            <FormLabel>Profile Picture</FormLabel>
                            <Input
                                name="profile"
                                type="file"
                                onChange={(e: any) => setFile(e.target.files[0])}
                            />
                        </FormControl>
                    </ModalBody>
            </Modal>
        </>
    );
}

打印结果 #

console.log(file)的输出：

File {name: 'burger 2.png', lastModified: 1658142356471, lastModifiedDate: Mon Jul 18 2022 16:35:56 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 156243, …}

打印FormData时显示：formData {}，为空状态。

解决方法 #

1. 修正FormData追加的参数 #

你当前代码里的formData.append("profile", "file");是错误的——第二个参数是字符串"file"，而非状态中存储的file文件对象。正确写法是：

formData.append("profile", file);

2. 正确查看FormData内容 #

浏览器直接console.log(formData)无法显示内部内容，因为FormData是不可枚举的对象。你可以通过以下方式查看：

• 获取单个项：console.log("文件：", formData.get("profile"))
• 遍历所有项：

for (let [key, value] of formData.entries()) {
  console.log(key, value);
}

修正后的完整代码 #

function UpdateProfile() {
    const [file, setFile]: any = useState(null);
    const handleSubmit = () => {
        const formData = new FormData();
        console.log(file);
        // 正确追加文件对象
        formData.append("profile", file);
        // 正确查看FormData内容
        console.log("FormData中的文件：", formData.get("profile"));
        for (let [key, value] of formData.entries()) {
            console.log(key, value);
        }
    };

    return (
        <>
            <Modal>
                    <ModalBody pb={6}>
                        <FormControl>
                            <FormLabel>Profile Picture</FormLabel>
                            <Input
                                name="profile"
                                type="file"
                                onChange={(e: any) => setFile(e.target.files[0])}
                            />
                        </FormControl>
                    </ModalBody>
            </Modal>
        </>
    );
}

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