自定义Base64图片上传函数：后端接收空字符串求助

尝试通过Base64格式上传图片至后端，流程看似正常，但后端接收到的图片字段是空字符串。用console.log能正常打印Base64数据，此前使用<FileBase64 />组件功能正常，改为自定义上传函数后出现问题，求解决。

错误原因 #

核心问题出在uploadImage函数里：setBaseImage是异步状态更新，当你执行setNewPost({ ...newPost, photo: baseImage })时，baseImage还没更新为刚转换好的Base64值，依然是初始的空字符串。

解决方案 #

直接使用刚转换完成的base64变量更新newPost，跳过依赖异步更新的baseImage状态；或者用函数式更新setNewPost，确保获取最新的状态快照。

修改后的完整代码 #

export default function NewPost() {
    const [title, setTitle] = useState("");
    const [file, setFile] = useState("");
    const [baseImage, setBaseImage] = useState("");

    const [newPost, setNewPost] = useState({
        userId: '',
        title: '',
        content: '',
        photo: '',
    });

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const res = await axios.post("/posts/", newPost);
            window.location.replace("/post/" + res.data._id);
            console.log('Saved Successfully');
        } catch (err) {
            console.log(err);
        }
    }

    const uploadImage = async (e) => {
        const file = e.target.files[0];
        const base64 = await convertBase64(file);
        setBaseImage(base64);
        console.log(base64);
        // 直接使用转换后的base64更新newPost
        setNewPost({ ...newPost, photo: base64 });
        // 也可以用函数式更新确保获取最新状态（推荐在复杂状态场景下使用）
        // setNewPost(prevState => ({ ...prevState, photo: base64 }));
    };

    const convertBase64 = (file) => {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = () => {
                resolve(fileReader.result);
            };
            fileReader.onerror = (error) => {
                reject(error);
            };
        });
    };

    return (
        <div className="newPostPageContainer">
            <form className="newPostForm" onSubmit={handleSubmit}>
                <div className="newPostTitleImageUploadCont">
                    <div className="newPostTitleContainer">
                        <label className="newPostFormLabel">Post Title:</label>
                        <input dir="auto" type="text"  
                            onChange={e => setNewPost({ ...newPost, title: e.target.value })} />
                    </div>
                    <div className="newPostUploadImgContainer">
                        <img src={baseImage} alt="" className="newPostUploadImg" />
                        <label htmlFor="file">
                            <PublishIcon />
                        </label>

                        <input 
                            type="file"
                            id="file"
                            onChange={(e) => { uploadImage(e); }}
                            style={{display: "none"}} />

                    </div>
                </div>
            
                <button className="newPostCreateButton" type="submit">
                    <p className="newPostCreateButtonText">Create</p>
                </button>
            </form>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者sultan.h