當我從前端發送資料時，我在后端收到 null 。我正在發送 2 個字串資料 URL 和日期，所以我認為我不需要使用額外的中間件來接收這些值。
前端：
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const today = new Date();
const date = today.getFullYear() '-' (today.getMonth() 1) '-' today.getDate();
const formData = new FormData();
formData.append('url', url);
formData.append('date', date);
console.log(url, date);
fetch('http://localhost:5000/shortUrls', {
method: 'post',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.insertedId) {
alert('Link Added')
setLoadings(true)
}
})
.catch(error => {
console.error('Error:', error);
});
}
后端：
// middleware
const app = express();
app.use(cors())
app.use(express.json())
app.post('/shortUrls', async (req, res) => {
const uniqueUrl = shortId({ url: req.body.url })
console.log(req);
const details = {
short: uniqueUrl,
full: req.body.url,
clicks: 0,
date: req.body.date,
}
const result = await AffiliateLinksCollection.insertOne(details)
res.json(result)
})
uj5u.com熱心網友回復：
它是空的，因為在服務器上你有一個json決議器，但是你正在發送一個multipart/form-data請求，并且沒有決議器來處理它。
由于您沒有上傳檔案，因此最簡單的方法是發送json請求：
e.preventDefault()
const today = new Date();
const date = today.getFullYear() '-' (today.getMonth() 1) '-' today.getDate();
// use object
const formData = {url, date};
console.log(url, date);
// post json
fetch('http://localhost:5000/shortUrls', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
如果要使用FormData，則需要在服務器上包含決議器。通常，這是multer，但由于您不上傳檔案，請使用body-parser
app.use(bodyParser.urlencoded({ extended: true }));
但是，正如FormData發送資料一樣multipart/form-data，bodyParser無法決議它，因此您需要將其轉換為 URL 編碼的字串URLSearchParams
fetch('http://localhost:5000/shortUrls', {
method: 'post',
body: new URLSearchParams(formData)
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450798.html
標籤：javascript 节点.js 反应 打字稿 表示