使用axios post发送图像文件和身体数据

Question

我想知道如何使用axios在react中将图像和其他数据发送到我的节点服务器。这是我拥有的代码，我可以发送formData或当前的数据。对于如何将它们都带到我服务器上的控制器的帮助，将不胜感激。

客户端

const [file,setFile] = useState('')
const [productName,setProduct] = useState('')

const onSubmit = (e)=>{
  e.preventDefault();
  const fd = new FormData();
  fd.append('file',file)
  fd.append('product',productName)    
   axios.post('http://localhost:5000/upload/product',fd,{
     headers:{
        'Content-Type': 'multipart/form-data'
       }
   })

服务器端

const bodyparser = require('body-parser');
const multer = require('multer');

app.use(bodyparser.json());
app.use(bodyparser.urlencoded({ extended: false }));

const productStorage =  multer.diskStorage({
    destination: './client/public/upload',
    filename : (req,file,cb)=>{
        cb(null,file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
})

const upload = multer({
    storage : productStorage,
    limits:{fileSize:1000000},
}).single("file")

app.post('/upload/product',(req,res)=>{
console.log(req.body.product)  // undefined ??? <-- my problem 
upload(req,res,err=>{
    if(err){
        console.log('upload failed')
    }else{
        console.log('upload success')
    }
})
})

我可以接收文件，但是不能接收产品名称字符串。控制台显示未定义。