I'm trying to upload information from the React frontend using formData, I checked the backend using postman and everything is fine, but formData is not passing the file to the backend. This is my code
React front-end component
import axios from 'axios' import React, { useState } from 'react' function NotificationSecond() { let server = "http://localhost:3456"; let address = `${server}/user/notification` const [Data, setData] = useState({ assigned_to:"", message:"" }) const [response, setresponce] = useState(); let submitter = (e)=>{ e.preventDefault(); let forForm = new FormData(); forForm.append('assigned_to',Data.assigned_to) forForm.append('message',Data.message) axios({ method:"post", url:address, data:forForm, headers: {"Content-Type": "multipart/form-data" }, }).then((data)=>{ setresponce(data.data) }).catch((err)=>{ console.log(err) }) } let inputHandler = (e)=>{ switch (e.target.value) { case "assigned_to":setData((pre)=>{return {...pre,assigned_to:e.target.value}}) break; case "message":setData((pre)=>{return {...pre,message:e.target.value}}) break; default: break; } } if(response){ return}else{ return (this is response
) } } export default NotificationSecond
Backend Controller
import Econnection from "../server.js"; let notification =(req,res)=>{ const {assigned_to,message}=req.body let value = [assigned_to,message]; let notificationAdder = `INSERT INTO notification(assigned_to,message) VALUES (?)`; Econnection.query(notificationAdder,[value],(err)=>{ if(err){ console.log(err) res.send('上传通知不成功') }else{ res.send({ forThanking : `上传成功,谢谢!`, forHomePageReturn: `点击这里返回首页` }) } }) } export default notification;
后端路由 import express from 'express'; import notification from '../Controaller/noticationControler.js'; let notificationRoute = express.Router(); notificationRoute.post('/notification',notification)
Enter code here
Export default notification routeI uploaded the backend, just in case, but according to my testing, everything in the backend is working properly, and all the switches and states are working properly, but I don't think axios is publishing the data through the route created to In the mysql database, the database only contains two columns, namely "assigned_to" and "message".
P粉8608979432023-09-13 19:02:19
The problem is that the form data method is not attached to the input value; I created an object with a different name and passed the object name to the axios method and it works fine. Also removed the header section from axios.
let file = { assigned_to: Data.assigned_to, message : Data.message } axios({ method:"post", url:address, data:file, }) .then((data) => { setresponce(data.data) }) .catch((err) => { console.log(err) }) }