react中的formdata，当我发送formdata到后端express时使null保持无效

Question

当我从前端发送数据时，我在后端收到空值。我正在发送 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)
        })

Answer 1

它是空的，因为在服务器上您有一个 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，但由于您没有上传文件，

app.use(bodyParser.urlencoded({ extended: true }));

因此请使用 body-parser，因为 FormData 将数据发送为 < code>multipart/form-data，bodyParser无法解析它，所以需要用URLSearchParams将其转为URL编码的字符串

fetch('http://localhost:5000/shortUrls', {
    method: 'post',
    body: new URLSearchParams(formData)
})