小编use*_*488的帖子

我想使用 React hook 表单和 axios 上传文件以及表单数据。我发现这个很棒的视频解释了如何创建一个简单的示例。但是，我没有找到一个很好的解决方案如何使用 axios 将数据传输到后端。考虑下面的简单示例：

function Test() {
    const {register, handleSubmit} = useForm();
    const onSubmit = (data) => {
        console.log(data);
    };
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register("name")} />
            <input {...register("picture")} type="file"/>
            <button>Submit</button>
        </form>
    );
}

现在我想出的提交函数 - 并且显然确实有效 - 看起来有点像这样：

const onSubmit = (data => {
     const formData = new FormData();
     for (const [key, value] of Object.entries(data)) {
        formData.append(key, value);
     }

    api.submitPost(formData, {headers: {'Content-Type': 'multipart/form-data'}})
       .then((response) => {
            console.log(response);
       })
       .catch((error) => {
            console.log(error);
       }); …