上传输入表单数据和file/image下一个js

Question

我正在尝试使用 Next js 将表单数据生活人员姓名、电子邮件和图像一起发送。我使用 formdata 进行文件上传，并使用 react-hook-form 进行表单输入。问题是我无法在 Next api.

中收到 image/file

我的代码是：

更改时：

const handleImgChange = (e) => {
    if (e.target.files && e.target.files[0]) {
        const img = e.target.files[0];
        setProfileImg(img);
    }
};

从输入中获取表单数据。

const handleIChange = (e) => {
    const value = e.target.value;
    setContents((prevContnet) => {
        return {
            ...prevContnet,
            [e.target.name]: value,
        };
    });
};

提交时

const handleOnsubmlit = (e) => {
    e.preventDefault();
    if (profileImg.length > 0) {
        const formData = { ...contents, profile_picture: profileImg };
        updateUserSetting(formData);
    } else {
        updateUserSetting(contents);
    }
};

更新用户设置

async function updateUserSetting(formdata) {
    try {
        console.log("form datas", formdata);
        dispatch({ type: "UPDATE_USER_SETTING_REQUEST" });
        const { data } = await axios(
            `${NEXT_URL}/api/updateusersetting`,
            {
                method: "PUT",
                formdata,
                "content-type": "multipart/form-data",
            }
        );
        console.log("return data ", data[0]);
        dispatch({ type: "UPDATE_USER_SETTING_SUCCESS", payload: data[0] });
    } catch (error) {
        dispatch({
            type: "UPDATE_USER_SETTING_FAIL",
            payload: error.response 
        });
    }
}

API

import { IncomingForm } from "formidable";

 export const config = {
     api: {
         bodyParser: false,
     },
 };

export default async (req, res) => {
    if (req.method === "PUT") {
        if (!req.headers.cookie) {
            res.status(403).json({ message: "Not Authorized" });
            return;
        }
        const { token } = cookie.parse(req.headers.cookie);

        console.log("body is", req.body);

        const formData = await new Promise((req, res) => {
            const form = new IncomingForm();
            form.parse(req, (err, fields, files) => {
                if (err) {
                    next(err);
                    return;
                }
                res.writeHead(200, { "content-type": "multipart/form-data" });
                res.json({ fields, files });
            });
        });
};

如何将数据放在一起并发送到所需的 API？提前致谢。

Answer 1

您可以使用 FormData 界面将文件和其他字段作为单个 JSON 化字符串或单个字符串发送。 Formidable会在回调中将你的字段和文件分开，你可以单独处理。

这是一个有效的 Codesandbox。

输出：

上传输入表单数据和file/image下一个js

Upload input form data and file/image Next js

multipartform-data

formidable

reactjs

next.js