如何在反应js中使用axios将数据和照片同时发送到节点js后端

Question

我正在尝试使用 axios 将一些表单数据和图像发送到后端，但我的代码无法正常工作。当我单独发送图像时它可以工作，而当我单独发送数据时它可以工作。但是如何同时发送：

我正在使用 reactjs 和 useState：

const [roomData, setRoomData] = useState(data)

我所有的数据都在 roomData 中。

const [files, setfiles] = useState()

我已经在输入标签和 setfiles(e.target.files) 上使用 onchange 将我的图像设置在 files 变量中

我已使用以下代码在 formdata 变量中附加了文件中的所有图像

const submitHandler=async(e)=>{
        e.preventDefault()
        const formData= new FormData();
        Array.from(files).forEach(file=>{
            formData.append('photos', file)
        })

        const res= await axios.post(
            'http://localhost:8000/api/sell_products',
            { formData, roomData }
        )

    }

使用这个我只能在后端获得 roomData 作为 req.body。但是当我控制台 req.files 它给出未定义的。帮助

Answer 1

您需要在表单数据中附加文本数据。不要单独发送

const submitHandler=async(e)=>{
    e.preventDefault()
    const formData= new FormData();
    form.append('data', roomData);
    Array.from(files).forEach(file=>{
        formData.append('photos', file)
    })

    const res= await axios.post('http://localhost:8000/api/sell_products', { formData})

}