search

Home  >  Q&A  >  body text

MySQL database not receiving file upload in form data

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 

this is response

}else{ return (
) } } 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 hereExport default notification route

I 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粉032977207P粉032977207473 days ago659

reply all(1)I'll reply

  • P粉860897943

    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)
      })
    }
    

    reply
    0
  • Cancelreply