我正在嘗試使用formData從React前端上傳訊息,我使用postman檢查了後端,一切正常,但是formData沒有將檔案傳遞給後端。這是我的程式碼
React前端元件
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
後端控制器
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)
在此輸入代碼
匯出預設通知路由我上傳了後端,以防萬一,但是根據我的測試,後端的所有事情都正常工作,所有的switch和state也正常工作,但是我不認為axios通過創建的路由將數據發佈到mysql資料庫中,資料庫僅包含兩個列,分別為「assigned_to」和「message」。
P粉8608979432023-09-13 19:02:19
問題是表單資料方法沒有附加到輸入值上;我建立了一個具有不同名稱的對象,並將物件名稱傳遞給axios方法,這樣就可以正常工作了。也從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) }) }